css - 如何使大图像在所有屏幕尺寸上都能很好地响应？

Question

我正在使用 Twitter Bootstrap 的 img-responsive 类。

我有一张图片 (1920x1200)，就高度而言，在 lg 屏幕上看起来太大，但在 xs 屏幕上正确。

如果我削减图像的高度，它在 lg 屏幕上看起来是正确的，但在 xs 屏幕上就太小了。

我尝试设置图像的最大高度，但它也改变了宽度，导致图像两边出现灰色空间。

如何使大图像在所有屏幕尺寸上都能很好地响应？

<div class="container-fluid text-center">
  <div class="row hero-image-container vertical-align">
    <img src="../../static/images/house.jpg" class="img-responsive">
    <h1 class="hero-image-address">
      <i class="hero-location-icon ion-ios-location" ariahidden="true"></i> Address Here
    </h1>
    <div class="hero-image-after"></div>
 </div>
</div>

Answer 1

Yasin 的回答看起来很实用。

添加媒体查询，使图像容器的高度在各种常见视口(viewport)尺寸下看起来都不错，如下所示:

.imageContainer{
  max-height: 600px;
  overflow: hidden;
}

/* common tablet portrait */
@media (min-width: 768px) {
    .imageContainer{ max-height: 800px; }
}

/* common tablet landscape */
@media (min-width: 1024px) {
    .imageContainer{ max-height: 900px; }
}

/* common 15" notebook */
@media (min-width: 1400px) {
    .imageContainer{ max-height: 1000px; }
}
 

<div class="imageContainer"><img src="http://www.walldevil.com/wallpapers/a52/wallpapers-pixel-landscapes-wallpaper-mountain-mountains-large-landscape.jpg"></div>