响应CSS编码中的图像问题

Question

我正在我的网站上进行响应式工作并使用封面图片。但我正在进入＆＃39;＆＃39;标签，而不是CSS文件。因此，当我做响应工作时，图像不合适。

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

顶部和底部有空间。我希望当屏幕很窄时图像可以缩放，并且图像留在没有顶部和底部空间的自己的标签上。

Answer 1

你应该试试这段代码。如果我理解正确，这就是你要做的事。

使图像高度：100％（覆盖容器的整个高度）; width：auto保留图像的宽高比并使图像居中。

请参阅代码段或

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;