响应CSS编码中的图像问题

我在我的网站上使用封面图片进行响应式工作。但我得到''标记，而不是CSS文件。所以当我进行响应式工作时，图像不适合。响应CSS编码中的图像问题

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

顶部和底部有空间。我想让图像在缩小屏幕时缩放，并且图像留在没有顶部和底部空间的自己的标签中。

2017-05-24 aalicenk

嗨aalicenk，请提供您所使用的代码，如果你既分享实际图像或者至少包括图像尺寸，这将有助于所以我们可以重现您当前的布局。 –

你应该像这样包含你的图像 - background-image：url（image.png）;添加高度和宽度，然后使用背景属性进行缩放等。https://www.w3schools.com/css/css_background.asp – Giedrius

嗨亲爱的朋友。对于迟到的回答我很抱歉。实际图像尺寸为1140x450。我为img使用该代码：height：auto; position：absolute;最大宽度：100％。这些代码对于响应式而言正常工作，但在缩小屏幕时发生顶部和底部空间。我使用img将是可靠的。所以我不使用CSS文件。当我尝试使用CSS代码时，发生了这种情况。但我不想要这个。我想在img中使用HTML标记。我寻找非常有关这个问题的答案，但我找不到。我的英语很弱，所以如果我不能告诉你我的问题。谢谢你的时间。 – aalicenk

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

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

看到片断或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>

来源

2017-05-25 10:44:28

亲爱的朋友，谢谢。我通过参考例子解决了问题。问题用一个小代码解决。我正在使用该代码：'code' style =“transform：scale（X，Y）;” 'code'。我可以通过这种方式放大图像。当我做响应工作时，图像缩小。谢谢大家。 – aalicenk

好，如果这个答案适合你。请评估为接受。感谢：D –

响应CSS编码中的图像问题

回答

相关问题