根據背景圖像尺寸div

Question

我需要動態調整div的高度以顯示其背景圖像。我試圖讓這個工作，所以我可以做的CSS轉換技巧，你把鼠標放在一個div和背景放大，但我的圖像將有不同的大小。任何幫助表示讚賞...我卡住了！

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>