What is the best way to define the maximum width for responsive images in Bootstrap 4?

Query:

  • How can I control the max-width of an image in Bootstrap 4 without losing its responsiveness?

Context:

  • Bootstrap 4's .img-fluid class ensures images remain responsive.

The image is set to scale with the parent element by utilizing max-width: 100%; and height: auto; (https://getbootstrap.com/docs/4.1/content/images/)

Current Issue:

  • Refer to JS Fiddle: https://jsfiddle.net/aq9Laaew/290257/
  • I am dealing with a large image that needs resizing.

  • I have specified max-width: 500px (using inline styling), which successfully sets the width of the image.

  • Challenge: However, the image fails to resize when the window size changes – losing its responsiveness.

Hoping for some clear guidance on this matter; I've searched for similar queries but haven't found a solution. Thank you!

cssbootstrap-4responsiveness

Answer №1

Your solution can be found below

.img-max {
  max-width: 500px;
  width:100%;
}

Make sure to apply the above class to your images.

I have made adjustments to your code on a fiddle. You can view the changes in this link:

Click here to see the updated version on jsfiddle

Answer №2

.img-max {
  max-width: 500px
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<p class="alert-primary p-3">
  When I set the max-width of the image, it loses its responsiveness.
</p>




<div class="container">
  <div class="img-max">
  <img  class=" mx-auto d-block mb-2 float-md-left mr-md-4 img-thumbnail"  src="https://images.pexels.com/photos/2422/sky-earth-galaxy-universe.jpg">
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore ipsa ea dolorem mollitia repudiandae odit dolore quod et voluptatem asperiores odio quam ipsam placeat nisi quo voluptate, laborum provident earum?
  </p>
</div>

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

Empty array returned when using wrapper.classes() with Vue-test-utils and CSS modules

Recently I started using Vue Test Utils along with CSS Modules. My Vue component is all set up with CSS Modules and it functions perfectly in the app as well as in Storybook. Take my BasicButton for example: <template> <button :class="[ ...

cssvue.jsjestjsvue-test-utilscss-modules

Learn how to efficiently apply styles to multiple objects within an array using the material-ui library

Currently, I'm utilizing the functional component of React.js. Within this component, I have an array of objects that contain specific styles. const data = [ { id: 1, color: '#000' }, { ...

javascriptcssreactjsmaterial-uijavascript-objects

The sorting of elements using the jQuery sort() function encounters issues on webkit browsers

Looking for a solution to sort elements by a number? Consider this part of a function that does just that. The number used for sorting is fetched from a data-ranking attribute of the element: $(".tab_entry").sort(function(a,b){ return parseFloat(a.dat ...

javascriptjquerycsssortingwebkit

When is the best time and place to break out Yahoo's Mojito Manhattan cocktail mix?

Yahoo! made headlines earlier this month by unveiling their new Mojito framework, set to be open sourced in 2012. I've been eager to learn more about this promising framework but haven't had any success so far. Does anyone know where I can find ...

javascripthtmlnode.jscssyahoo

Stylishly Select with Bootstrap 4

Currently, I am utilizing Angular 2 with bootstrap 4 and have implemented the following select element: <div class="form-group"> <label class="col-md-4 control-label" for="OptionExample">Choose an option:</label> <div class="c ...

htmlcssangularselectbootstrap-4

What is the best way to retrieve the row ID of the selected item in react-bootstrap-table-next?

How can I retrieve the Report ID of the selected row in react-bootstrap-table-next? I have defined my columns in a specific manner as shown here: https://i.sstatic.net/a3SMk.png One of the columns is for photos, and I need to extract the ID from it to dis ...

reactjsbootstrap-4bootstrap-modal

Divs with floating left have a complete vertical border on their right side

I would like the first and second divs to have a full height border on their right side while floating left. CSS: div.wrapper { border: 1px solid black; } div.wrapper > div { text-align: center; width: 50px; padding-left: 5px; fl ...

htmlcss

Tips for rendering objects in webgl without blending when transparency is enabled

My goal is to display two objects using two separate gl.drawArrays calls. I want any transparent parts of the objects to not be visible. Additionally, I want one object to appear on top of the other so that the first drawn object is hidden where it overlap ...

javascripthtmlcsswebgl

I have organized two <h4>, <img>, and <p> tags into individual <div> elements. To prevent overlap, I floated the image and used <br> tags to create separation between the <div> elements. However, they still overlap despite these efforts

Arranging two h4, img, and p tags within separate <div> elements, I attempted to use float for the image and tag for separation. However, they are still overlapping. https://i.sstatic.net/SUxli.png Here is the image displaying the issue. I' ...

htmlcss

Tips for positioning images in the center of a footer

Hello, I am new to coding and would like some help adjusting the code for this website: The footer section at the bottom of each page features a row of logos. My goal is to make sure that these logo images display properly on mobile devices (without dropp ...

css

How can I customize the visibility toggles for the password input field in Angular Material?

Currently immersed in the Angular 15 migration process... Today, I encountered an issue with a password input that displays two eyes the first time something is entered in the field. The HTML code for this is as follows: <mat-form-field appearance=&qu ...

javascriptcssangulartypescriptangular-material

Using React Material UI icon within an auto complete feature

https://i.stack.imgur.com/W3CmF.png I am struggling to incorporate the target icon into the autoComplete component. After reviewing the documentation, I have been unable to find a solution. In TextInput, a similar outcome can be achieved by implementing ...

javascriptcssreactjsmaterial-ui

Is it possible to utilize the useRef Hook for the purpose of storing and accessing previous state values?

If you have already implemented the useState and useEffect Hooks for maintaining previous state, another approach is to utilize the useRef Hook to track previous state values as well. ...

javascriptjavahtmlcssreactjs

What is the best way to showcase the most recent information from a MySQL database in a Bootstrap modal using AJAX?

Is there a way to display the user's most recent comment in a Bootstrap modal after successfully submitting the comment using AJAX without closing the modal? [Example Image ->>:][https://i.sstatic.net/qjpM5.jpg] process.php : <script ty ...

phpmysqlajaxtwitter-bootstrapbootstrap-4

The font in my Next.js / Tailwind CSS project starts off bold, but unexpectedly switches back to its original style

I recently integrated the Raleway font into my minimalist Next.js application with Tailwind CSS. I downloaded the font family in .ttf format and converted it to .woff2, but I'm having trouble changing the font weight using custom classes like font-bol ...

javascriptcssfontsnext.jstailwind-css

How to align Font Awesome icons inside `<span>` vertically with each other

Trying to vertically align multiple font awesome icons: ############################# icon icon icon icon icon icon ############################# <div class="announcement-card-body modal-body card border-0"> <span class="info fa fa-info- ...

htmlcssfont-awesome

Aligning text in the center of a Bootstrap navbar

Seeking guidance on how to center text within my Bootstrap navbar with the following structure: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784 ...

htmlcsstwitter-bootstrap

Tips for creating the appearance of a resizable element

My goal was to replicate the resizing and moving functionality of elements in Adobe Illustrator using CSS alone. Unfortunately, I couldn't find any useful resources on how to achieve this. ...

cssresizecontrolsoutline

Automatically change a text based on its location

Currently leveraging the amazing flexible-nav to showcase the current subtopic within my post. I am also considering the possibility of extracting this current-string and showcasing it at the top of the page in my main navigation bar. This way, the text w ...

javascripthtmlcss

Implementing a click event listener to target a specific div using JavaScript

In my JavaScript code, I have implemented a snowfall effect. I am looking to create a click event specifically on the 10th snowflake that falls down. Additionally, I want to add a class called "clickable" to this snowflake. The goal is to redirect the user ...

javascriptjqueryhtmlcss