如何使图像响应并使其保持在左右容器之间。
我试过把它全部放到另一个容器里,但没用。
我知道这听起来很基础,但事实并非如此。
body {
background-color: black;
}
.left {
background-color: red;
width: 150px;
height: 800px;
float: left;
}
.right {
background-color: green;
width: 150px;
height: 800px;
float: right;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
<div class="left"></div>
<div class="right"></div>
<img src="paintingOg.gif" style="width:50%">
最佳答案
这样怎么样?它是(接近)您需要的吗?也请检查响应能力。
body {
background-color: black;
}
.left {
background-color: red;
width: 150px;
height: 800px;
float: left;
}
.right {
background-color: green;
width: 150px;
height: 800px;
float: right;
}
.center {
height: 800px;
background-color: blue;
overflow: auto;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
<div class="left"></div>
<div class="right"></div>
<div class="center">
<img src="https://picsum.photos/500/500?gravity=west">
</div>
关于html - 如何使容器之间的图像居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58200025/