8

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;
 }
service-paradis
  • 3,333
  • 4
  • 34
  • 43
Nicoli
  • 643
  • 1
  • 7
  • 23
  • I must ask, why are you not using a program like GIMP or PhotoShop to resize the images, so you don't need to worry about distortion etc.? – eyoung100 Jun 16 '14 at 19:04
  • Because I do not want to create lots of thumbnails, the image shown on this div is a link to a main article. – Nicoli Jun 16 '14 at 20:24

4 Answers4

7

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.

.imageParent, .imageParentCover {
    position: relative;
    text-align: center;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

/* Solution using `transform: translate`: */
.imageParent img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

/* Solution using `object-fit: cover`: */
.imageParentCover img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
Solution using <code>transform: translate</code>:
<div class="imageParent">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/640px-Google_2015_logo.svg.png" />
</div>

<hr />

Solution using <code>object-fit: cover</code>:
<div class="imageParentCover">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/640px-Google_2015_logo.svg.png" />
</div>
service-paradis
  • 3,333
  • 4
  • 34
  • 43
  • @Nicoli See also: [Image Auto Resize](http://stackoverflow.com/questions/3029422/image-auto-resize-to-fit-div-container) – eyoung100 Jun 16 '14 at 20:28
1

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

MrWhite
  • 43,179
  • 8
  • 60
  • 84
  • I did try it but image get distorted, looks like it is scaled only in height. – Nicoli Jun 16 '14 at 18:13
  • It shouldn't get distorted if only one dimension is given, however, it will get cropped (but that is unavoidable given the dimensions). I've added a jsfiddle example to my answer. – MrWhite Jun 16 '14 at 18:31
  • This solution is also correct but the one from morgul helped me to understand what was going on, anyway, thank you to both of you! – Nicoli Jun 16 '14 at 20:32
  • 1
    I realise my solution, as it stands, does not center the image. If the image dimensions stay the same then you could apply `margin-left:-30px` (or use a percentage) to the `img` in order to center it. +1 to morgul's solution, I think using `transform:translate(-50%)` would be the better way to solve this (providing browser support is sufficient for you) as it would seem to be independent of any image dimensions. – MrWhite Jun 16 '14 at 20:40
0

If you specify a 100% size for your image. Your image will then take 100% of its container. In order to maintain the actual size, you should write an inline style like this: style="width: auto"

rahgozar
  • 1
0

Your container should have overflow: hidden;. Scale down your image with the object-fit property.

.imageContainer{
    width: 100px;
    height: 100px;

    // align center the image
    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;
}

img{
    object-fit: scale-down;
    width: 100%;
    height: 100%;
}
MANISH PRAJAPATI
  • 11
  • 2