大きな画像をすべての画面サイズでうまく反応させるにはどうすればよいですか？

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>