Question

我曾经使用这种技术裁剪图像 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%; }

如果您有这样的图像

，这是有效的

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

但如果您有这样的图像

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

你最终会在底部留下空白区域，因为图像宽度大，高度小。

那么你有什么替代方法可以使用适用于这两种情况的css裁剪图像吗？

Answer 1

如果您不需要在IE9之前定位浏览器，则可以使用transform: translate结合max-width和max-height属性来创建此类效果 - 这将使您的容器div保持填充状态并保持纵横比：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我喜欢来自@easwee的答案（标记不太好！），但我想我会为那些可能仍然需要支持不支持css转换的浏览器的人分享另一种技术。另一个好处是使用内在容器意味着您不必手动设置包含元素的高度，这使得该技术非常适合响应式设计。

/*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>

这里的诀窍是padding-bottom元素上的.outer-intrinsic属性设置了比率。 75％，例如在演示中，比例为4：3。因此，如果您想要一个完美的正方形，您可以将padding-bottom属性设置为100%。 max-width和min-height属性会强制包含的图像完全填充容器。

如何使用CSS裁剪任何大小的图像

2 个答案: