how to crop images that has any size using css

Question

I used to crop images using this technique
HTML

<div class="container">
     <img src="http://your-source.com" alt="alt" />
</div>

CSS

.container { width: 418px; height: 240px; overflow: hidden; }
.container img { width: 100%; }

this works if you have image like this

---------
|       |
|       |  
|       |
|       |
---------

but if you have image like this

-------------------
|                 |
-------------------

you will end up with blank area in the bottom, because the image have big width and small height.

so do you have any alternative way to crop images using css which works for both situations ?

possible duplicate of [CSS Display an Image Resized and Cropped](http://stackoverflow.com/questions/493296/css-display-an-image-resized-and-cropped) — easwee, Feb 01 '15 at 09:53
@easwee they are using background, i don't need to use it for SEO as i mentioned earlier. thanks — Dot Freelancer, Feb 01 '15 at 10:02
@dotfreelancer true - retracted my close vote and answered - check if it is what you need. — easwee, Feb 01 '15 at 10:04

easwee · Accepted Answer · 2015-02-01T11:43:59.400

5

If you don't need to target browsers prior to IE9 you can create such effect using transform: translate combined with max-width and max-height properties - this will keep your container div filled and maintain the aspect ratio:

.container {
    position:relative;
    width: 418px;
    height: 240px;
    overflow: hidden;
    background:red;
    margin-bottom:10px;
}
.container img {
    display:block;
    position: absolute;
    top: 50%; 
    left: 50%;
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%);
    min-width: 100%; 
    min-height: 100%; 
}

<div class="container">
    <img src="http://placehold.it/300x50" alt="alt" />
</div>
<div class="container">
    <img src="http://placehold.it/300x300" alt="alt" />
</div>
<div class="container">
    <img src="http://placehold.it/300x350" alt="alt" />
</div>

edited Feb 01 '15 at 11:43

answered Feb 01 '15 at 10:00

easwee

15,757
24
60
83

this's exactly what i need, it works 100% true.. but i can't understand how you did that.. can you please give me more explanation ? – Dot Freelancer Feb 01 '15 at 10:10
1

@dotfreelancer first I position the image to the center with top and left attributes - since the orientation point of a HTML element is always at 0 0 I move it's origin to the center - transform-origin 50% 50%. Than I just translate it for half of the img width to minus - and use min-width and min-height to keep the shorter side within the bounds of the element. – easwee Feb 01 '15 at 10:29

score 1 · Answer 2 · answered Feb 01 '15 at 11:31

I like the answer from @easwee (less markup nice!), but I thought I'd share another technique for those who may still need to support browsers that don't support css transforms. Another benefit is that the use of the intrinsic container means that you don't have to manually set a height on your containing element, which makes this technique great for responsive designs.

/*Mini Reset*/
* {
    margin: 0;
    padding: 0;
}
/*Container element needs width defined but not height*/
.container {
    width: 50%;
    float: left;    
    overflow: hidden;
}
.outer-intrinsic {
    position: relative;
    padding-bottom: 75%;
    height: 0;
}
.inner-intrinsic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.inner-intrinsic img {
    max-width: 100%;
    min-height: 100%;
}

<div class="container">
    <div class="outer-intrinsic">
        <div class="inner-intrinsic">
            <img src="https://unsplash.imgix.net/photo-1416184008836-5486f3e2cf58?q=75&fm=jpg&s=1168eb53b941d6e992595864a3771f7a" alt="Portrait Image" />
        </div>
    </div>
</div>
<div class="container">
    <div class="outer-intrinsic">
        <div class="inner-intrinsic">
            <img src="https://ununsplash.imgix.net/uploads/141202616623001715bb7/c1b3b9b0?fit=crop&fm=jpg&h=675&q=75&w=1050" alt="Landscape Image" />
        </div>
    </div>
</div>
<div class="container">
    <div class="outer-intrinsic">
        <div class="inner-intrinsic">
            <img src="https://unsplash.imgix.net/photo-1419332563740-42322047ff09?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="Landscape Image" />
        </div>
    </div>
</div>
<div class="container">
    <div class="outer-intrinsic">
        <div class="inner-intrinsic">
            <img src="https://unsplash.imgix.net/photo-1417962798089-0c93ceaed88a?fit=crop&fm=jpg&h=1575&q=75&w=1050" alt="Portrait Image" />
        </div>
    </div>
</div>

The trick here is that the padding-bottom property on the .outer-intrinsic element sets the ratio. At 75%, for example in the demo, the ratio is 4:3. So, if you wanted a perfect square, you would set the padding-bottom property to 100%. The max-width and min-height properties force the contained image to fill the container fully.

thanks for sharing your idea, really i like your technique since my website is responsive.. i wish if i can select 2 answers as correct.. — Dot Freelancer, Feb 01 '15 at 19:32

how to crop images that has any size using css

2 Answers2