我拼命地尝试将我的图像放在 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；不起作用）。我可以对代码进行哪些更改才能获得此结果？
心有法竹
慕尼黑5688855
相关分类