背景画像に基づいてdivを整える

Question

背景画像を表示するにはdivの高さを動的に調整する必要があります。私はこの仕事を得るために努力していますので、私はdivを上にマウスを置いて背景を拡大すると、そのCSSのトリックを変えることができますが、私の画像は様々なサイズになります。どんな助けもありがたいです...私は立ち往生しました！

CSS：

<style> 
.dynaimage{ 
    width:80%; 
    background-image:url('variable-image'); 
    background-size:100%; margin:0 auto; 
} 

</style> 

HTML：

<div class="dynaimage"></div> 
<p>The above div should take the height of its background image</p> 

Answer 1

imgタグを使用してこれを行う方法は、ないbackground-image

あなたはdivの中で各画像をラップする必要があります。 divをoverflow:hiddenに設定します。画像の幅は100％でなければなりません。 transform:scale(x)を使用してimgをスケールします。 divの幅を使用して画像の幅を設定します。

ここに私の脳はその周りに同点た結び目より方法簡単ですデモ

.img-wrap { 
 
    overflow: hidden; 
 
    display: inline-block; 
 
    /*width: 20%;*/ 
 
} 
 
.img-wrap img { 
 
    width: 100%; 
 
    -webkit-transition: 1s; 
 
    -moz-transition: 1s; 
 
    -ms-transition: 1s; 
 
    -o-transition: 1s; 
 
    transition: 1s; 
 
} 
 
.img-wrap:hover img { 
 
    transform: scale(1.2); 
 
}

<!-- Image size: 420 x 220 --> 
 
<div class="img-wrap"> 
 
    <img src="http://lorempixel.com/image_output/animals-q-c-420-220-3.jpg" alt=""> 
 
</div> 
 

 
<!-- Image size: 200 x 290 --> 
 
<div class="img-wrap"> 
 
    <img src="http://lorempixel.com/image_output/animals-h-c-200-280-2.jpg" alt=""> 
 
</div>