CODEWITHSUNDEEP
htmlcssimagecrop
crablab
crablab

Reputation: 25

CSS crop image to certain dimensions

I have looked around a lot for a solution to this but I can't seem to find one.

I have an image that I need to display within a certain set of dimensions. It must be no more than 100% of the width of the container: fine. But when I try to faux crop it to 50% of the container; it is scaled.

An example of the 100% width: https://i.sstatic.net/WTisJ.png

And an example of the problem when it is set to only 50% of the container: https://i.sstatic.net/J01sF.png

The code:

CSS:

.shopcontent{
    margin-top: 120px;
}

.product{
    margin: 2px;
    display: block;
    height: 250px;
    width: 300px;
    border: 2px solid #7f8c8d;
    border-radius: 10px;
    overflow: hidden;
}

.prodimg{
    max-width: 100%;
    max-height: 50%; (The problem line!)
    border: 0px solid white;
    border-radius: 10px;
}

.prodimgcont{
    overflow: hidden;
}

HTML:

<div class="shopcontent">

<div class="product">

    <span class="prodimgcont">
    <img src="http://u.danmiz.net/xqz" class="prodimg"></img>
    </span>

    <p>This is a test</p>

</div>

</div>

Thanks for any help: I really have tried to find a way of doing this but nothing seems to work!

Upvotes: 0

Views: 806

Answers (2)

ProblemsOfSumit
ProblemsOfSumit

Reputation: 21325

First of all, your img tag should be self closing. so replace

<img src="http://u.danmiz.net/xqz" class="prodimg"></img>

with 

<img src="http://u.danmiz.net/xqz" class="prodimg" />

To your problem. I'd advice you to give the dimensions to the container (change that spanto div by the way) and then assign your image as a background-image, because it is more useful for scaling images, especially with background-size: cover.

HTML

<div class="shopcontent">
    <div class="product">
        <div class="prodimgcont"></div>
        <p>This is a test</p>
    </div>
</div>

CSS

.shopcontent{
    margin-top: 120px;
}

.product{
    margin: 2px;
    display: block;
    height: 250px;
    width: 300px;
    border: 2px solid #7f8c8d;
    border-radius: 10px;
    overflow: hidden;
}

.prodimgcont{
    display: block;
    max-width: 100%;
    height: 50%;
    max-height: 50%;
    border: 0px solid white;
    border-radius: 10px;
    background-image: url(http://u.danmiz.net/xqz);
    background-size: cover;
    overflow: hidden;
}

I created a JSfiddle to show you how to do it.

This is one way to do it. Let me know if you absolutely need to use an img tag. There is a solution for that too. In any case: you need to assign the dimensions you want to the container of the image, not the image itself - because the image needs to be cut off.

Please note, that background-size: cover won't work in IE8 and lower, unless you use a polyfill.

Upvotes: 0

Jonathan Crowe
Jonathan Crowe

Reputation: 5803

If I understand your problem correctly you could achieve the desired cropping effect like so:

HTML

<div class="img_container">

    <div class="cropper">
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQQWvNeCn17lshW3c9Z4PLXlTZe6GPf2oiNrLZQft1nPgld1WYb" />
    </div>
</div>

CSS

.img_container {
    width:300px;
    height:250px;    
}

.img_container .cropper {
    width:50%;
    height:50%;
    overflow:hidden;
}

.img_container .cropper img {
    width:200%;
    height:200%;

}

You use the .cropper div to set the desired 50% width and add overflow:hidden, then set the child img tag to width:200% (100% of grandparent width)

Fiddle: http://jsfiddle.net/6hjL0pat/3/

EDIT:

Updated fiddle with your use case

Upvotes: 2

Related Questions