Menu
Question:
Background:
.img-fluid class makes images responsive. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element (https://getbootstrap.com/docs/4.1/content/images/)
My situation:
I have set max-width: 500px (inline styling), and this sets the image's width - Awesome.
Problem: It does not resize / respond when you shrink the window size... It is no longer responsive.
Hope that was clear; I've tried to look for similar questions here but wasn't successful. Cheers!
853
To make an image responsive, you need to give a new value to its width property. Then the height of the image will adjust itself automatically. The important thing to know is that you should always use relative units for the width property like percentage, rather than absolute ones like pixels.
Images in Bootstrap are made responsive with . img-fluid . max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
The width and height can be set for an element, by using 25%, 50%, 75%, 100%, and auto values. For instance, use w-25 (for remaining values, replace 25 with those values) for width utility and h-25 (for remaining values, replace 25 with those values) for height utility.
Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it's 100% wide all the time).
Your answer is here
.img-max {
max-width: 500px;
width:100%;
}
and use the class in the image.
I have edited your fiddle. Please refer the link
jsfiddle.net/saravanan7944/ygamjz7s/1
185
.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">
I can set the max-width of the image... but then it stops being responsive.
</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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
