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

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一起创建这样的效果- 这将保持你的容器div填充并保持宽高比:max-widthmax-height

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

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