时间戳

首页 > 解决方案 > 如何在绝对块中保持图像响应？

html - 如何在绝对块中保持图像响应？

问题描述

我拼命想把我的图像放在 2 个 div 块之间，并且这个是响应式的。

我建议拍摄一个方形图像，因为如您所见，我希望我的图像适合一个圆圈，并且由于高度在我的绝对块中设置为自动（因为我想保持响应行为），所以形状将是一个矩形。

html, body {
      width: 100%;
      height: 100%;
}
.child1 {
      width: 100%;
      height: 200px;
      background-color: red;
}
.child2 {
      width: 100%;
      height: 200px;
      background-color: green;
}
.main {
      position: relative;
      width: 100%;
}
.absolute-block {
      position: absolute;
      top: 25%;
      left: 40%;
      width: 16%;
      border: 2px solid yellow;
}
img {
      height: 100%;
      width: 100%;
      border-radius: 50%;
      border: 5px solid white;
}
<body>
  <div class="main">
    <div class="absolute-block">
      <img src="test.jpg">
    </div>
    <div class="child1"></div>
    <div class="child2"></div>
  </div>
</body>

因此，如果一切顺利，它应该看起来像这样：

渲染

现在，当我尝试水平缩小窗口的大小时，我希望图像的大小垂直和水平缩小（可以），并且我希望图像的中心保持在 2 个 div 之间（它没有不行）。我可以对我的代码进行哪些更改以获得此结果？

标签： htmlcss

解决方案

您想尝试一下吗，

img {
  width: 100%;
  height: auto;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

推荐阅读