在这里给我的第一篇文章。
我正在使用 div 以相同的比例 (180wx170h) 裁剪缩略图。在处理纵向和横向图像时，我遇到了困难。如果我使用这个对于肖像风格的图像来说很好：
.crop img {max-height:170px; width:auto}
.. 适合风景风格的图片：
.crop img {max-width:180px; height: auto;} is fine for landscape style images.
所以我基本上想裁剪横向的侧面和纵向的顶部/底部。有点像优先考虑的最大高度和最大宽度。
我知道这可以用 PHP 轻松完成，但我真的只知道 CSS，所以这是我的首选。
我需要保持图像的纵横比。
【问题讨论】：
max-height和max-width。
经过大量其他“解决方案”后的解决方案
max-width:100%;
max-height:100%;
height: auto;
width:auto;
【讨论】：
2019 年编辑：
如果你想保留<img>标签，请查看object-fitcss属性，跨浏览器的支持很好。
如果你想在宽度变化时保持纵横比，试试padding-hack。
据我了解，您有 180x170 像素的块，并且您想用图像完全填充它们。尝试将图像移动到背景并使用background-size:cover。
演示http://jsfiddle.net/heuku/1/
<div style="background-image:url(http://placekitten.com/100/200)"></div>
<div style="background-image:url(http://placekitten.com/200/100)"></div>
<div style="background-image:url(http://placekitten.com/200/200)"></div>
div {
width:180px;
height:170px;
background-repeat:no-repeat;
background-size:cover;
}
请注意，此解决方案不适用于 IE8 及更低版本。
【讨论】：
object-fit 的精彩提示
编辑：我已经改进了解决方案，请参见此处：https://stackoverflow.com/a/34774905/1663572
我正在使用这个解决方案，当我试图将图像放入正方形（或其他任何东西）并将其居中时，我发现了这个解决方案。它的组合非常棒，您将 padding-bottom 和 height 0 设置为其容器 - 这使得它以固定的比例响应。
适用于 IE9 及更高版本。对于 IE8 及以下版本，需要一些 CSS hack。
HTML
.container {
height: 0;
padding-bottom: 100%; /* Or 75% for 4:3 aspect ratio */
position: relative;
overflow: hidden;
}
.container img {
display: inline-block;
max-width: 90%; /* You can use different numbers for max-width and max-height! */
max-height: 75%;
width: auto;
height: auto;
position: absolute;
left: 50%; /* This sets left top corner of the image to the center of the block... */
top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
-webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
/* Fallback for IE8 */
@media all\0 {
.container img {
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
}
在这里试试：http://jsfiddle.net/thiemeljiri/uhdm4fce/4/
注意：如果使用引导程序，请将类 .container 更改为其他内容。
【讨论】：
你可以试试
.crop img {max-height:170px; max-width:180px;}
由于max-height 和max-width 是最大值，它应该可以工作。浏览器会在不超出您的尺寸的情况下使图像尽可能大。
请注意，这是未经测试的，但基于this W3Schools page。
希望这会有所帮助！
【讨论】：
试试：
.crop img {max-height: 170px; max-width: 180px;}
【讨论】：
这可能有点晚了，但我发现将上述图像包裹在<figure> 中可以缩放图像并保持纵横比。
【讨论】：