Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Prevent or disable automatic image resize in a div with css (using bootstrap)

I'm trying to show the original size of the image. Often that's bigger than the width of the div that's containing it.

In modern browsers, it gets automatically resized to fit the parent div. Even when I use overflow: auto the image still gets resized.

So how can I prevent the image from getting resized when the outer div has a set width?

Thank you!

like image 239
Hao Luo Avatar asked Jan 24 '13 17:01

Hao Luo


People also ask

How to auto-resize an image to fit a DIV container using CSS?

How to auto-resize an image to fit a div container using CSS? To auto-resize an image or a video to fit in a div container use object-fit property. It is used to specify how an image or video fits in the container.

How do I resize an image in CSS?

Resize images with the CSS width and height properties ¶. Another way of resizing images is using the CSS width and height properties. Set the width property to a percentage value and the height to "auto". The image is going to be responsive (it will scale up and down).

How to disable resizable property of textarea using CSS?

How to disable resizable property of textarea using CSS? This resizable property is used to set the resizable area of elements. It is mostly used with textarea and div elements. To disable resizable property of an element use resize to none. It is the default value. geeks.

How to resize an image without losing quality?

Otherwise, the image can get distorted and lose its quality. Another way of resizing images is using the CSS width and height properties. Set the width property to a percentage value and the height to "auto". The image is going to be responsive (it will scale up and down). Note that the image could be scaled more than the original size.


Video Answer


1 Answers

I used this one img {min-width:100%}

like image 57
Mike Avatar answered Sep 19 '22 21:09

Mike