How to trim off Image in CSS?

Question

Ok, here is the problem, my app allow users to insert any image. It is up to them insert very big or very long image. But when I rentder image I want the width="50px" and height="100px".

ok if I do

.myImage{
   width:50px;
   height:100px;
}

then the image could be distorted cos the proportion is not accurate. So, here is what I think. First I want the image to have width:50px then if the height>100px, then CSS will trim off the bottom. Ok, let see this example, user inserted a big image with width=150px and height=600px. So if I reduce the width to 50px, the the height will be 200px. I want to cut the bottom of the image so it will show only (w: 50px, h: 100px) see the picture:

So how to do that?

Answer 1

1) Trim image with <div> and overflow:hidden:

 div.trim {
     max-height:100px;
     max-width: 50px;
     overflow: hidden;
 }

 <div class="trim"><img src="veryBigImage.png"/></div>

2) Use max-width: 50px; and max-height: 100px for image itself. So image will preserve it's dimensions

Answer 2

I would suggest using the CSS CLIP property to trim it to the size you want.

img {
position: absolute;
clip: rect(0px,50px,100px,0px);
width:50px;
}

That way, if the image is small enough, nothing will get cut off. Otherwise, you trim it down.

Answer 3

You could wrap the img with a div and apply overflow: hidden;

HTML:

<div class="img-wrapper">
    <img src="path/to/image.jpg" />
</div>

CSS:

.img-wrapper{
    max-height: 100px;
    overflow: hidden;
}

.img-wrapper img{
    width: 50px;
}