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

【问题标题】：How can I make a large image respond nicely on all screen sizes?如何使大图像在所有屏幕尺寸上都能很好地响应？
【发布时间】：2016-08-13 11:40:59
【问题描述】：

我正在使用 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>

【问题讨论】：

请注意，使用媒体查询来改变容器或图像的尺寸会改变显示的尺寸，但仍会加载完整的图像 - 然后浏览器必须重新调整图像的尺寸 - 这不是非常高效。此外，对于小型设备和用户数据计划而言，非常大的图像可能会在下载速度/页面重量方面令人望而却步。您可能会发现 srcset 很有用。这是一个允许浏览器从一系列选项中进行选择的属性，并且只会加载最适合的选项。提供正确大小的图像总是更好 - 而不是依赖浏览器调整大小。

标签： css twitter-bootstrap responsive-design

【解决方案1】：

Yasin 的回答看起来很实用。

添加媒体查询以使图像容器的高度在各种常见视口大小下看起来不错，如下所示：

.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; }
}

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

【讨论】：

【解决方案2】：

您可以在父容器上设置 maxHeight 并将溢出设置为隐藏。所以它会切断图像。像这样的东西。这张图片是 1080 像素，但我只显示了 600 像素。

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

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

【讨论】：

【解决方案3】：

.img-holder {
			min-height: 500px;
			background: url('http://wfiles.brothersoft.com/w/waterfall-hd-wallpaper_171535-1920x1200.jpg') center center no-repeat;
			background-size: cover;
		}
		
		@media screen and (max-width:768px) {
			.img-holder {
				min-height: 300px;
			}
		}

@media screen and (max-width:400px) {
			.img-holder {
				min-height: 200px;
			}
		}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid text-center">
		<div class="row hero-image-container vertical-align">

			<div class="img-holder">

			</div>
			<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>

尝试将其用作背景图像，例如使用 background-size:cover。

【讨论】：