CSS：

Question

我已经四处寻找解决方案，但我似乎找不到一个。

我有一张图片需要在一组尺寸内显示。它必须不超过容器宽度的100％：很好。但是，当我尝试将它作为50％的容器进行仿制时;它是缩放的。

100％宽度的示例：http://i.stack.imgur.com/WTisJ.png

当设置为容器的50％时问题的示例：http://i.stack.imgur.com/J01sF.png

代码：

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>

感谢您的帮助：我确实试图找到一种方法，但似乎没有任何效果！

Answer 1

如果我能正确理解您的问题，您可以获得所需的裁剪效果：

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

}

您使用.cropper div设置所需的50％宽度并添加overflow:hidden，然后将子img标记设置为width:200%（祖父素宽度的100％）

小提琴：http://jsfiddle.net/6hjL0pat/3/

编辑：

更新了您的用例

Answer 2

首先，您的img标记应该是自动关闭的。所以替换

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

带

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

解决你的问题。我建议您为容器添加尺寸（顺便将span改为div），然后将图像指定为background-image，因为它更有用用于缩放图像，尤其是使用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;
}

我创建了一个JSfiddle来向您展示如何操作。

这是一种方法。如果您绝对需要使用img标记，请与我们联系。也有解决方案。在任何情况下：您需要将所需的尺寸分配给图像的容器，而不是图像本身 - 因为图像需要被剪切掉。

请注意，除非您使用a polyfill，否则background-size: cover无法在IE8及更低版本中使用。

CSS裁剪图像到某些尺寸

CSS：

HTML：

2 个答案: