保持图像比率的最佳方法，当它是响应和得到一个最小的高度。

Question

什么是最好的方式保持<img />比率，而它是响应和得到一个最小的高度？

，我想要的是设置一个min-height，当screen-size is lower than 620px和图片必须是水平中心，而不是松散的比率。

看我的代码和小提琴：http://jsfiddle.net/M2Qkh/

<img src="http://farm4.staticflickr.com/3484/3718426345_6d4a540840_b.jpg" />
<style type="text/css">
img {
    width:100%;
}
@media only screen and (max-width: 620px) {
    img {
        display:block;
        min-height:150px;
    }
}
</style>

Answer 1

尝试将其设置为背景图像，然后将css应用于容器div或span：

.carousel-img {
    background-image:url(http://farm4.staticflickr.com/3484/3718426345_6d4a540840_b.jpg);
    background-repeat:no-repeat;
    max-width:100%;
    height: 300px;
    overflow: hidden;
    background-position: center 20%;
    background-repeat: no-repeat;
    background-size:cover;
    display: block;
}

请注意，背景位置是在中心和20%以上的顶部.

还请注意重要的背景尺寸是“掩护”。

覆盖效应会覆盖洞的宽度空间，也会保留它的比率(当然，你会失去宽度的左右边，但这就是保持这个比率的折中方法)。

编辑：，OP创建的用于说明这两种效果的小提琴：http://jsfiddle.net/M2Qkh/4/

Answer 2

在媒体查询最小宽度620 it，您现在基本上是设置的高度和宽度的图像，这将导致它改变‘比率’。

一旦最小高度:150 to生效，图像将开始压缩，因为宽度设置为100%。

如果您不希望这种情况发生，您需要将媒体查询中的图像宽度更改为width: auto;，这将告诉它在将高度设置为150 If时保持正确的方面比例。因此，图像将开始裁剪(溢出容器)，而不是压扁。如果这是您想要的效果，您还需要一些其他的更改。您还需要在容器上为图像设置一个overflow: hidden;，否则您将得到一个水平滚动条。

@media only screen and (max-width: 620px) {
    img {
        display:block;
        height:150px; /* use height not min-height */
        width: auto;
    }
    .img-wrapper {overflow: hidden;}
}