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:

enter image description here

So how to do that?

It would be better to crop the image in the upload process - If you're scaling/cropping down large images via CSS you're load speeds are going to suffer. However if you don't care about that, you could wrap the image in a div at the desired size with `overflow: hidden` set, or set it as a background image and change the background position. — Novocaine, Sep 29 '14 at 14:07
possible duplicate of [Resize image proportionally with CSS?](http://stackoverflow.com/questions/787839/resize-image-proportionally-with-css) — ExCluSiv3, Sep 29 '14 at 14:09
Use background-image css property instead img tag. (Of course if img is not part of design and you don't have to be semantic :)) — Kinga, Sep 29 '14 at 14:10
I think you have to generate a thumbnail. What technology are you using? — Ragnar, Sep 29 '14 at 14:13
I set maxsize= 1 mb, so if a image is very big then it will be very blur — Tum, Sep 29 '14 at 14:17

score 16 · Accepted Answer · answered Sep 29 '14 at 14:15

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

score 9 · Answer 2 · answered Sep 29 '14 at 14:09

9

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.

answered Sep 29 '14 at 14:09

starvator

989
1
11
26

3

`clip` is now deprecated in favor of `clip-path`. – Algorythmis Jul 05 '20 at 08:13

Jmh2013 · Answer 3 · 2014-09-29T14:21:07.677

4

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;
}

edited Sep 29 '14 at 14:21

answered Sep 29 '14 at 14:08

Jmh2013

2,625
2
26
42

score 2 · Answer 4 · answered Sep 29 '14 at 14:08

2

By using max-width and max-height you can set height to whatever you want and the full image will display.

.myImage{
    height:auto;
    width:auto;
    max-width:300px;
    max-height:300px;
}

answered Sep 29 '14 at 14:08

ExCluSiv3

184
2
20

score 1 · Answer 5 · answered Sep 29 '14 at 14:07

1

You need to put the image in a container of the desired trim size with overflow:hidden

html:

<div id="container"><img src="myimage.jpg"/></div>

css:

#container {width:50px;height:100px;overflow:hidden}
#container img {width:50px;}

answered Sep 29 '14 at 14:07

MeLight

5,454
4
43
67

How to trim off Image in CSS?

5 Answers5

Linked