响应CSS编码中的图像问题
我在我的网站上使用封面图片进行响应式工作。但我得到''标记,而不是CSS文件。所以当我进行响应式工作时,图像不适合。响应CSS编码中的图像问题
我将宽度设置为100%,高度设置为自动。但即便如此,图像并不适合。
顶部和底部有空间。我想让图像在缩小屏幕时缩放,并且图像留在没有顶部和底部空间的自己的标签中。
你应该试试这段代码。如果我理解正确,这就是你想要做的。
使图像高度: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>
亲爱的朋友,谢谢。我通过参考例子解决了问题。问题用一个小代码解决。我正在使用该代码:'code' style =“transform:scale(X,Y);” 'code'。我可以通过这种方式放大图像。当我做响应工作时,图像缩小。谢谢大家。 – aalicenk
好,如果这个答案适合你。请评估为接受。感谢:D –
嗨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