响应 CSS 编码中的图像问题答案

【问题标题】：Responsive for image problems in CSS coding响应 CSS 编码中的图像问题
【发布时间】：2017-05-25 18:44:28
【问题描述】：

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

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

顶部和底部都有空间。我希望图像在屏幕较窄并且图像驻留在自己的标签上而没有顶部和底部空间时进行缩放。

【问题讨论】：

嗨 aalicenk，请提供您正在使用的代码，如果您共享实际图像或至少包括图像尺寸以便我们可以重现您当前的布局，这将有所帮助。
你应该像这样包含你的图片 - background-image: url(image.png);添加高度和宽度，然后使用背景属性进行缩放等。w3schools.com/css/css_background.asp
亲爱的朋友们好。我很抱歉迟到的答复。真实图像尺寸为 1140x450。我将该代码用于 img: height: auto;位置：绝对；最大宽度：100%。该代码可以正常工作以响应但在屏幕狭窄时会出现顶部和底部空间。我使用 img 将是可验证的。所以我不在 CSS 文件中使用。当我尝试使用 CSS 代码时，就会发生这种情况。但我不想要这个。我想在 img 的 HTML 标签中使用。我正在寻找关于这个问题的答案，但我没有找到。我的英语很弱，所以如果我不能告诉你我的问题。谢谢你的时间。

标签： html css image responsive-design responsive-images

【解决方案1】：

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

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

见 sn-p 或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>

【讨论】：

亲爱的朋友，谢谢。我通过您提供的参考示例解决了问题。用一个小代码解决了这个问题。我正在使用该代码：code style="transform: scale(X, Y);" code。我可以用这种方式放大图像。当我进行响应式工作时，图像会缩小。谢谢大家。
如果这个答案对你有用。请将其评为已接受。谢谢：d