html - 响应CSS编码中的图像问题

Question

我正在我的网站上做响应式工作并使用封面图片。但我进入的是 '' 标签，而不是 CSS 文件。所以当我做响应式工作时图像不适合。

我将宽度设置为 100%，将高度设置为自动。但即便如此，图像也不合适。

顶部和底部都有空间。我希望图像在屏幕较窄时缩放，并且图像在没有顶部和底部空间的情况下保留在自己的标签中。

Answer 1

你应该试试这段代码。如果我没理解错的话，这就是您想要做的。

使图像高度:100%(覆盖容器的整个高度)； width:auto 以保持图像的纵横比并使图像居中。

参见片段或 jsFiddle

.container {
  height:700px;
  width:100%;
  position:relative;
  background:red;
  overflow:hidden;
}

<div class="container">
 <img src="http://lorempixel.com/1140/450/"  height="100%" width="auto" style="position:absolute;left:50%;transform:translateX(-50%)"/>
</div>