CSS中居中的响应式图像

Question

谢谢您的任何帮助！ 我需要将此图像居中，同时在调整浏览器窗口大小时，高度应减小。 Flexbox已经完成了第一件事。但不幸的是，身高保持不变。图像的宽度大于视口，这是故意的假设。

请在此处检查：https://jsfiddle.net/23nqgtz5/

html：

<div class="img-container">
 <img src="https://via.placeholder.com/1200x200" />
</div>

css：

.img-container {
  display: flex;
  justify-content: center;
}

Answer 1

将您的img包裹在另一个div中，并应用flex: 1 1 auto;属性。

给出img max-width: 100%;并使用.image的填充来控制图像宽度

HTML

<div class="img-container">
  <div class="image">
    <img src="https://via.placeholder.com/1200x200" />
  </div>
</div>

在CSS下方添加

.image {
    flex: 1 1 auto; 
    padding: 0 30px;
    text-align: center;
}
img {
  max-width: 100%;
}

请注意，flex不是100％与所有浏览器兼容