仅限CSS的max-height和max-width

Question

我在这里的第一篇文章.

我正在使用div以相同的比例裁剪缩略图(180wx170h).在处理肖像和风景图像时,我会陷入困境.如果我使用这个肖像风格的图像很好:

.crop img {max-height:170px; width:auto} 

..并且适用于风景图像:

.crop img {max-width:180px; height: auto;} is fine for landscape style images.  

所以我基本上想要如果横向和顶部/底部如果肖像裁剪侧面.有点像优先最大高度和最大宽度.

我知道这可以通过PHP轻松完成,但我真的只知道CSS,这将是我的第一选择.

我需要保持图像的宽高比.

Answer 1

经过大量其他"解决方案"后的解决方案

max-width:100%;
max-height:100%;
height: auto;
width:auto;

Answer 2

编辑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及更低版本.