Question

我是否可以完全删除容器div并将图像变成容器，既保留图像的宽度和高度，又保留样式表中已有容器的样式？任何建议将不胜感激。谢谢！

.img_zoom_container {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 45%;
}

.img_zoom_window {
  border: 2px solid #d4d4d4;
  width: 300px;
  height: 300px;
  position: absolute;
  top: 20%;
  left: 0%;
  margin-left: -200px !important;
  transform: scale(0) translateY(-50%);
  transform-origin: 0% 0%;
  transition: all ease .2s;
}

.img_zoom_container:hover .img_zoom_window {
  left: 170%;
  transform: scale(1) translateY(-50%);
}

<div class="img_zoom_container">
  <img id="main_img_kit" class="prod_img mobile_hideb" height="300" width="300">
  <div id="img_main" class="img_zoom_window"></div>
</div>

Answer 1

正如Felipe所提到的，如果您试图在图像上方（内部）显示其他元素，则可以始终将图像设置为容器的背景，并简单地将其他容器放入其他div的外部容器中。

Answer 2

让背景图像推送父容器的宽度和高度的一种方法是使用2张图像。

<div class='container'>
  <img src='http://via.placeholder.com/350x150' class='pusher' />
  <img src='http://via.placeholder.com/350x150' class='animator' />
</div>

它们可以是同一张图像，只是其中一张具有0不透明度并且禁用了指针事件。这种方法也很容易做出响应。我在这里为您设置了一个演示：

https://codepen.io/cidicles/pen/djMXeW

希望有帮助！

使用图像作为容器？

2 个答案: