如何讓大圖像在所有屏幕尺寸上都能很好地響應？

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

您可以在父容器上設置maxHeight並將溢出設置爲隱藏。所以它會切斷圖像。像這樣的東西。這張圖片是1080px，但我只顯示600px。

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

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

Answer 2

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

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

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

 
\t \t \t <div class="img-holder"> 
 

 
\t \t \t </div> 
 
\t \t \t <h1 class="hero-image-address"> 
 
\t \t \t <i class="hero-location-icon ion-ios-location" ariahidden="true"></i> Address Here 
 
\t \t \t </h1> 
 
\t \t \t <div class="hero-image-after"></div> 
 
\t \t </div> 
 
\t </div>

嘗試使用它作爲這樣的背景圖像與背景尺寸：蓋。

Answer 3

亞辛的回答看起來很實用。

添加媒體查詢，使圖像容器的高度看在各種常見的視口大小不錯，像這樣：

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