レスポンシブ・イメージ（固定高さ）

Question

私は固定高さのレスポンシブ・イメージを持っています。ここで

は私のhtmlです：ここでは

<div class="col-md-6"> 
    <div class="img"> 
     <img src="http://image.noelshack.com/fichiers/2016/16/1461065658-b-v-s.jpg"> 
    </div> 
</div> 
<div class="col-md-6"> 
    <div class="img"> 
     <img src="http://image.noelshack.com/fichiers/2016/16/1461065665-kfp3.jpg"> 
    </div> 
</div> 

は私のCSSです：

.col-md-6 { 
    width: 50%; 
    float: left; 
} 

.img { 
    overflow: hidden; 
    position: relative; 
    height: 290px; 
} 

.img img { 
    max-width: 100%; 
    min-width: 100%; 
    min-height: 100%; 
} 

ここ

は私jsfiddleです：https://jsfiddle.net/23o81xrb/

uが見ることができるように、.imgのは290pxの高さを持っていますそのようにしておく必要がありますが、ウィンドウを縮小すると、画像は適合しません。 290pxの高さを維持して幅を調整できるように、画像に「ズーム」のようにしたいと思います。

私の "悪い"英語のために申し訳ありません、あなたが理解してほしいと思っています。

ありがとうございます、ありがとうございます。

Answer 1

固定高さのズームエフェクトをimgタグで作成する場合は、幸運！

しかし、画像を背景として使用する場合は、高さを固定してもらいたい場合があります。次に例を示します。

.col-md-6 { 
 
    width: 50%; 
 
    float: left; 
 
} 
 
.img { 
 
    overflow: hidden; 
 
    position: relative; 
 
    height: 290px; 
 
} 
 
.img.first { 
 
    background-image: url('http://image.noelshack.com/fichiers/2016/16/1461065658-b-v-s.jpg'); 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 
.img.second { 
 
    background-image: url('http://image.noelshack.com/fichiers/2016/16/1461065665-kfp3.jpg'); 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 
.img img { 
 
    max-width: 100%; 
 
    min-width; 
 
    100%; 
 
    min-height: 100%; 
 
}

<div class="col-md-6"> 
 
    <div class="img first"> 
 

 
    </div> 
 
</div> 
 
<div class="col-md-6"> 
 
    <div class="img second"> 
 
    </div> 
 
</div>