gpt4 book ai didi

css - 图像未正确调整大小 : image gets cut off when window is resized

转载 作者:行者123 更新时间:2023-11-28 07:04:42 24 4
gpt4 key购买 nike

我至少得到了以下渲染图像,但是当窗口的大小调整超过某个点时:图像的一部分被截断了。

#header {
background-image: image-url('my_header.png'); #image-url is a helper in rails
background-repeat: no-repeat;
height: 100px;
background-size: 100%;
border-radius: 1em;
}

然后显示我如何在 application.html.erb 中指定正文顶部的图像:

<body>
<div id="header"></div>
</body>

我想要发生的是图像按比例缩放但不被截断。我不想要任何特定的高度设置。我希望它根据需要自动缩放(但是,除非我使用 px 指定高度,否则我无法渲染图像)。

最佳答案

@Pangloss 提供了一个绝妙的答案值得认可 at this jsfiddle他在评论中提到了这一点。

这是他的CSS:

#header {
background-image: url('http://i.imgur.com/zOZVQaf.jpg');
background-repeat: no-repeat;
background-size: contain;
border-radius: 1em;
border: 1px solid blue;
}
#header img {
display: block;
visibility: hidden; /*hidden but reserve the space*/
width: 100%;
height: auto;
}

和 html:

<div id="header">
<img src="http://i.imgur.com/zOZVQaf.jpg">
</div>

@Pangloss 在评论中提供了这个答案。如果/当他发布此问题的答案时,我会将其切换到他的答案。

关于css - 图像未正确调整大小 : image gets cut off when window is resized,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33028209/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com