根据背景图像调整 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>