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-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及更低版本中使用。

Answer 3

修改：我改进了解决方案，请参见此处：https://stackoverflow.com/a/34774905/1663572

我正在使用这个解决方案，我发现，当我试图将图像放入正方形（或其他）时。它的组合非常出色，你可以在它的容器中设置填充底部和高度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更改为其他内容。

Answer 4

你可以尝试

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

由于max-height和max-width是最大值，它应该有效。浏览器会使图像尽可能大，而不会超出您的尺寸。

请注意，这是未经测试的，但基于this W3Schools page。

希望这会有所帮助!!

Answer 5

你有答案！

尝试：

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

Answer 6

这可能有点晚了，但是我发现用<figure>包装所说的图像会缩放图像，并保持宽高比。

仅限CSS的max-height和max-width

6 个答案:

你有答案！