35

在这里给我的第一篇文章。

我正在使用 div 以相同的比例（180wx170h）裁剪缩略图。在处理纵向和横向图像时，我遇到了困难。如果我使用这个对于肖像风格的图像很好： 

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

.. 适用于风景风格的图像：

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

所以我基本上想裁剪横向的侧面和纵向的顶部/底部。有点像优先的最大高度和最大宽度。

我知道这可以用 PHP 轻松完成，但我真的只知道 CSS，所以这将是我的首选。

我需要保持图像的纵横比。

4

6 回答 6

82

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

max-width:100%;
max-height:100%;
height: auto;
width:auto;
于 2015-10-29T16:50:37.090 回答
22

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 及以下版本。

于 2013-01-16T03:31:52.253 回答
3

编辑：我改进了解决方案，请参见此处：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 更改为其他内容。

于 2015-01-21T17:54:40.050 回答
2

你可以试试

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

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

请注意，这是未经测试的，但基于此 W3Schools 页面。

希望这可以帮助！！

于 2013-01-16T02:07:01.580 回答
0

你有答案！

尝试：

.crop img {max-height: 170px; max-width: 180px;}
于 2013-01-16T02:07:27.210 回答
0

这可能有点晚了，但我发现将所述图像按<figure>比例包装，以保持纵横比。

于 2018-08-18T08:45:14.020 回答