CSS裁剪图像到特定尺寸

Posted 2023-02-25

【中文标题】CSS裁剪图像到特定尺寸

【英文标题】：CSS crop image to certain dimensions

【发布时间】：2014-12-28 17:42:34

【问题描述】：

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

我需要在一组特定尺寸内显示图像。不得超过容器宽度的 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>

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

【参考方案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/

编辑：

用你的用例更新小提琴

【参考方案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，因为它对于缩放图像更有用，尤其是使用 @987654329 @。

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 标签，请告诉我。也有解决方案。在任何情况下：您需要将所需的尺寸分配给图像的容器，而不是图像本身 - 因为需要切断图像。

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

【讨论】：

谢谢！这很好:) 我需要能够更改 HTML 中的图像（最终 src 将由 php 提供......）所以我只是添加了一个样式标签。

啊当然。别客气。请注意我刚刚添加到答案中的关于 IE8 的 cmets。

其实，使用 标签会更容易...对不起：/

我不会说它更容易，只是另一种方法。不过请继续，我不会编辑我的答案以包含img-way，因为乔纳森已经发布了一个答案。