我拼命地尝试将我的图像放在 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 之间（它不& #39；不起作用）。我可以对代码进行哪些更改才能获得此结果？
2 回答
心有法竹
TA贡献1866条经验 获得超5个赞
首先将绝对块放在容器中间居中，我们可以这样做
top: 50%; left: 50%; transform: translate(-50%,-50%);
top 和 left 将根据元素的左上角定位元素，然后我们使用 Transform 根据元素自身的方向将元素在两个方向上移动一半宽度和高度。
现在，一旦块完全居中，我们就可以在其中添加我们想要的任何内容。
* {
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>
慕尼黑5688855
TA贡献1848条经验 获得超2个赞
您想尝试以下方法吗？
img {
width: 100%;
height: auto;
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
- 2 回答
- 0 关注
- 109 浏览
添加回答
举报
0/150
提交
取消