Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Keep image original size inside smaller div

I have an image that is 600x400px, and want it inside a smaller div of size 240x200px, but the image shrinks or gets distorted. I want the original size image centered in the smaller div, which would hide some of the image

I wrote this CSS rule to apply to different image sizes.

.theBox {
   float: left;
   overflow: hidden;
   width: 240px;
   height: 200px;
}

.theBox img {
   display: block;
   height:100% !important;
   width:100% !important;
 }
like image 787
Nicoli Avatar asked Jun 16 '14 17:06

Nicoli


People also ask

How do I make a large image fit in a Div?

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. Additionally, you can also apply the max-height property if you've a fixed height div element, so that the image doesn't overflow from ...

How to auto-resize a large image to fit in a Div?

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. Additionally, you can also apply the max-height property if you've a fixed height div element, so that the image doesn't overflow from the div's boundary horizontally or vertically.

How to maintain aspect ratio of images in CSS?

To maintain the aspect ratio of images in CSS, the easiest way is to manually set the dimension of the width, then the height to auto; Or vice-versa, set the height of the image, then the width to auto. But there are more good methods to keep the aspect ratio, let us walk through a few examples in this guide – Read on to find out!

How to make an image expand to fill its parent Div?

div { width: 48px; height: 48px; } div img { display: block; width: 100%; }. This will make the image expand to fill its parent, of which its size is set in the div CSS.


2 Answers

If you specify a 100% size for your image. Your image will then take 100% of its container.

The thing you want is keeping your file at its original size, so do not specify any size for your image.

overflow:hidden is the key to show only a part of your image.

If you want to always have the center of your image visible, you should take a look at this CSS3 property transform:translate(-50%,-50%) with a proper positioning.

Take a look at this jsfiddle and tell me if it can help you.


Edit: With 2020 modern browser, it may be useful to take a look at the CSS object-fit property. In particular object-fit: cover;. Take a look at this updated jsfiddle.

like image 131
service-paradis Avatar answered Nov 15 '22 10:11

service-paradis


To maintain the aspect ratio, only size one dimension, the browser will size the other to maintain the aspect ratio. With the dimensions you have given you'll need to set the height to fit the container (as opposed to the width) so not to have any gaps:

.theBox img {
    display: block;
    height: 100%;
}

Example: jsfiddle

like image 38
MrWhite Avatar answered Nov 15 '22 08:11

MrWhite