The functionality of responsive images is not functioning as intended within the Bootstrap framework

I'm currently working on troubleshooting a code issue. I am trying to implement a responsive image using Bootstrap, but it seems to not be functioning correctly. How can I go about resolving this problem?

<header class="masthead text-center text-white d-flex">
  <div class="container my-auto">
    <div class="row">
      <div class="col-lg-10 mx-auto">
        <!--responsive image not working with bootstrap -->
        <img class = "img-responsive" src = "img/HDtagliata.jpg" alt = "">

      </div>
      <div class="col-lg-8 mx-auto">
        <p class="text-faded mb-5"></p>
        <a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">alpafin</a>
      </div>
    </div>
  </div>
</header>
htmlcssbootstrap-4

Answer №2

When testing your code with the correct bootstrap CDN and random image dimensions, I encountered responsive behavior, suggesting there may be an issue with your bootstrap CDN implementation.

Note: This pertains to Bootstrap 3

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<header class="masthead text-center text-white d-flex">
                  <div class="container my-auto">
                    <div class="row">
                      <div class="col-lg-10 mx-auto">
        <!--immage responsive do not word on bootstrap -->
                        <img class = "img-responsive" src = "img/HDtagliata.jpg" alt = "">


                      </div>
                      <div class="col-lg-8 mx-auto">
                        <p class="text-faded mb-5"></p>
                        <a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">alpafin</a>
                      </div>
                    </div>
                  </div>
                </header>

         </body>
</html>

If you are using Bootstrap 4 To make images responsive in Bootstrap 4, apply the .img-fluid class. This class sets max-width: 100%; and height: auto; on the image for scaling within the parent element.

<img src="..." class="img-fluid" alt="Responsive image">

Answer №3

When utilizing Bootstrap 4, the img-responsive class is no longer available. It is recommended to use the img-fluid class instead.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having performance issues with an HTML5/JavaScript game on Internet Explorer 8

A new game has been developed using html/javascript. Due to confidentiality reasons, the code cannot be fully shared. The game runs smoothly on most browsers except for IE, which poses a challenge. Compatibility with IE8 is essential, despite its limitati ...

javascripthtmlinternet-explorer

Adjust the height of an element using CSS based on the height of another

Is there a way to have two divs per row, where the second div always displays its full content and the height of the first div matches the height of the second div? If the content in the first div exceeds the height, it should be scrollable. I've atte ...

javascripthtmlcss

"Glowing orbs in the night: a dark mode spectacle with

I have implemented a night mode (or perhaps dark mode) toggle button located at the top-right corner of my webpage. Here is a link to a perfect example showcasing what I am aiming for However, unlike the provided link, I switch between night mode and lig ...

javascripthtmlcsskeyframe

Differences between PHP Filter and PHP htmlspecialchars compared to sqli prepare in PHP

I've been intrigued by the pros and cons of different methods for preventing SQL injection. The PHP filter checks if the input is in the correct format and returns true or false, which can then be sent to the server or not. Using the PHP htmlspecial ...

phphtmlsql

Modify the label contents to reflect the selected file, rather than using the default text

Currently, I am working on customizing my file upload input to enhance its appearance. Everything is going smoothly so far, but I am facing difficulty in finding a suitable jQuery script that can meet my specific requirements. My objective is to have the ...

javascripthtmljquery

A pop-up appears, prompting me to redirect to an external URL when clicking on a link that opens in a new tab on my WordPress website

Seeking assistance in dealing with a popup that appears when trying to open a link redirected to an external URL. The popup prompts for permission to open the link in a new tab. Upon inspecting the Element, the code snippet below is revealed: <div cla ...

javascripthtmljquerywordpress

Tips for verifying jquery datePicker dates?

Here are two input fields, startDate and tilldate, which utilize the jQuery datepicker plugin. The issue at hand is that when a user selects a date in the startDate field, only the next two days should be available for selection in the tillDate field. Fo ...

jqueryhtmljquery-uijquery-ui-datepicker

How to Handle the Absence of HTML5 Spellcheck in Specific Web Browsers

While HTML5 spellcheck functionality may vary across different browsers, there are instances where it might not be supported in certain corporate environments. In the event that HTML5 is not supported in a particular browser, it's essential to first c ...

javascripthtmlspell-checking

Assign separate classes to even and odd div elements

My PHP code block has this structure: $flag = false; if (empty($links)) { echo '<h1>You have no uploaded images</h1><br />'; } foreach ($links as $link) { $extension = substr($link, -3); $image_name = ($extensi ...

phphtmlcss

What is the best way to select a clicked span element within a div using JQuery and then adjust the spans before and after it

<div> <span>A</span> <span>B</span> <span>C</span> <span>D</span> </div> If a user clicks on one of the spans within the div, I want to apply styles (such as text color) to that span and all prec ...

jqueryhtmlcss

Issue with dropdown menu appearing beneath specific elements in Internet Explorer versions 7 and 8

I've been encountering some troublesome issues with a website I'm working on, specifically in Internet Explorer 7/8. On certain pages, the navigation elements are getting hidden below text and images, causing confusion for me. I've attempted ...

css

Align Text Center inside a Magical H1 Heading Tag

I'm having a bit of trouble with something that should be simple. I want to center the text inside my h1 tag on a wizard, and I've added this CSS to my stylesheet.css: .h1textalign { text-align:center; } Here's how I'm trying to apply ...

htmlcssasp.nettext-align

Is there a way to dynamically change select2 styling using code when a form is submitted?

Having trouble highlighting empty select2 selects when a form is submitted? I'm struggling to override my existing CSS styling upon document load. Check out my jQuery attempt: var $requiredUnfilledItems = $(".required:not(.filled)"); if ($requiredUn ...

jquerycsscss-selectorsjquery-select2

image in the background following the header

Live Example: http://jsbin.com/opokev/54 I am currently trying to set this image as the background image while also including a header, but as you can see in the demo, the header is overlapping the image. Is there a way I can rearrange this so that the h ...

htmlcssbackground-image

use python selenium to retrieve text enclosed by two span elements

<li class="page-item active"> <span class="page-link"> "12" <span class="hjhs">(current)</span> </span> </li> After reviewing the code above, my objective is to extr ...

pythonhtmlseleniumxpathtext

What is the best way to ensure a consistent spacing between two flex items?

I am working on a project to enhance my knowledge by rebuilding Facebook. One of the new concepts I am learning is Flexbox. When you resize the login page of Facebook, you'll notice that the Navigation shrinks but the logo and login inputs remain sta ...

htmlcssflexbox

Creating a replicated Dropdown menu with Jquery and inserting it into a changing Div

I currently have a dropdown list on my page with the ID of "mainDDL" and some pre-existing data. Now, I am looking to duplicate this dropdown list and add it to another specific div element. To accomplish this, I used the following code snippet: var dd ...

javascriptjqueryhtmlasp.net

Using Selenium WebDriver to retrieve the tagname of an element

I am trying to use python to extract the name of the element data-test-carrier-name, specifically looking for "trenitalia" as the result. The relevant HTML snippet is: div class="_1moixrt _dtnn7w" tabindex="0"span data-test-carrier-name="trenitalia" My ...

pythonhtmlseleniumwebdriverelement

Inquiries regarding jQuery's functionality and efficiency

I was wondering about the best way to improve performance? Would it be more efficient to have two images written in HTML, one visible and one hidden, and then use jQuery to toggle their display (hiding the visible one and showing the hidden one)? <img ...

jqueryhtmlcssimageperformance

Adjusting height in CSS can be done dynamically based on the content within

Currently, I am working on a project where I need the submenu to adjust based on content. The issue is that right now, the submenu has a fixed capacity of 4 items. For example, when you click on 'sale', it displays 4 submenu items perfectly. Howe ...

htmlcss