CSS crop image to certain dimensions - html

Question

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: http://i.stack.imgur.com/WTisJ.png
And an example of the problem when it is set to only 50% of the container: http://i.stack.imgur.com/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!

Answer 1

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

Answer 2

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.