这是我在这里发布的第一篇文章。
我正在使用一个div来裁剪所有缩略图的比例，都为180宽x170高。但是当处理纵向和横向的图片时遇到了困难。如果我使用以下代码，那么对于纵向样式的图片来说是可以的：
.crop img {max-height:170px; width:auto}
...并且适用于横向风格的图片：
.crop img {max-width:180px; height: auto;} is fine for landscape style images.
我想要根据图片的横竖屏来裁剪其两侧或上下部分，就像优先使用最大高度和宽度一样。
我知道可以用PHP很容易地实现这一点，但我只熟悉CSS，所以我首选CSS。
我需要保持图片的长宽比。
在经历了许多其他“解决方案”之后，得出的解决方案。
max-width:100%;
max-height:100%;
height: auto;
width:auto;
2019年更新:
如果你想保留<img>标签，请查看object-fit CSS属性，它在各种浏览器上的支持非常好。
如果你想在改变宽度时保持纵横比，请尝试使用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 的一个很好的技巧。 - Mabyn编辑：我已经改进了解决方案，请参见此处：https://dev59.com/OnA75IYBdhLWcg3w7tx6#34774905
我正在使用这个解决方案，我在尝试将图片适配并居中到正方形（或其他）时找到它的。它与容器设置padding-bottom和height 0的组合非常出色- 这使其具有固定比例的响应性。
适用于IE9及更高版本。 对于IE8及以下版本，需要一些CSS技巧。
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/
注意：如果使用Bootstrap，请将类“ .container ”更改为其他名称。
您可以尝试
.crop img {max-height:170px; max-width:180px;}
由于max-height和max-width是最大值，因此应该可以工作。浏览器将尽可能使图像变大，而不会超过您的尺寸。
请注意，这未经测试，但基于此W3Schools页面。
希望这可以帮助！
尝试：
.crop img {max-height: 170px; max-width: 180px;}
<figure>中可以保持其宽高比例缩放。
max-height和max-width。 - alexvance