css - CSS中的居中和响应图像

Question

提前感谢您的帮助! 我需要将此图像居中，同时在调整浏览器窗口大小时高度应降低。第一件事已经用 flexbox 完成了。但不幸的是高度保持不变。图像的宽度大于视口(viewport)，这是故意的假设。

请在这里查看: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% 兼容所有浏览器