Question

如何使图像具有响应性，并将其保持在左右容器之间。

我尝试将所有内容放到另一个容器中，但它不起作用。

我知道这听起来很基础，但实际上不是。

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%">

Answer 1

这种方式怎么样？是否（接近）您需要什么？请也检查响应性。

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>

Answer 2

您不需要容器来使内容居中。最好使用1个包含所有内容的容器。如果要将图像居中放置div，请使用以下代码：

<div align="center">
    <image src="whatever.png"/>
</div>

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 {
  width: 100%;
  height: auto;
}

<div class="left"></div>
<div class="right"></div>
<div align="center">
<img src="paintingOg.gif" />
</div>

如何在容器之间居中放置图像？

2 个答案: