问我怎样才能在一个绝对块中保持图像的响应性？
EN

Stack Overflow用户

提问于 2020-04-13 04:18:42

回答 2查看 209关注 0票数 1

我正拼命地试图将我的图像放在两个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之间(它不起作用)。为了得到这个结果，我可以更改代码什么呢？

html

css

云联络中心6.1折起

灵活稳定的一体化云联络中心，助力快速搭建集电话、在线交流、音视频通话为一体的客户联络平台

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-04-13 04:45:21

首先，只需将绝对块放在容器中间，我们就可以用

top: 50%;
left: 50%;
transform: translate(-50%,-50%);

top和left将根据其左上角定位元素，然后根据其自身的宽度和高度，使用变换将元素在两个方向上移动一半。

现在，一旦该块完全居中，我们就可以在其中添加我们想要的任何内容。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

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: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16%;
  border: 2px solid yellow;
}

img {
  max-height: 100%;
  max-width: 100%;
  border-radius: 50%;
  border: 5px solid white;
}

<div class="main">
  <div class="absolute-block">
    <img src="https://i.picsum.photos/id/353/300/300.jpg">
  </div>
  <div class="child1"></div>
  <div class="child2"></div>
</div>

票数 1

Stack Overflow用户

发布于 2020-04-13 04:22:29

你想试一试吗？

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