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％;使用img缩放transform:scale(x);使用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>

根据背景图像调整div的大小

1 个答案: