Menu
Anyone who has used twitter bootstrap knows that an image can be made responsive using the img-responsive class in the html img tag. However, these images take up 100% of the width of the division.
How can I make the image responsive while still keeping its original width?
491
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.
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.
Answer: Use the CSS max-width Property You can simply use the CSS max-width property to auto-resize a large image so that it can fit into a smaller width <div> container while maintaining its aspect ratio.
Create responsive images by adding an . img-responsive class to the <img> tag. The image will then scale nicely to the parent element.
You can put the image in a wrapper and give the wrapper the width you want the image to have. HTML
<div class="imgwrapper">
<img src="img.jpg" class="img-responsive">
</div>
CSS
.imgwrapper {
width: 80%;
}
The above should in theory make the imgwrapper 80% of the width of the parent-element, and the img-responsive-class on the image will fill up the whole wrapper.
If this doesn't answer your question, could you explain a bit better what you mean with keep original width, but make it responsive? Since making it responsive will resize the image, which means it will not have the original width.
194
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
