响应 CSS 编码中的图像问题

Question

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

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

顶部和底部有space。我希望在屏幕较窄时图像缩放并且图像在没有顶部和底部的情况下插入自己的标签space。

Answer 1

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

制作图像height: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>

响应 CSS 编码中的图像问题

Responsive for image problems in CSS coding

html

css

image

responsive-design

responsive-images