如何解决与窗口大小相同的图像元素:已关闭
我想在我的html网站上拥有一个与网站宽度相同的图像。
我显然已经使用了<meta name="viewport" content="width=device-width,initial-scale=1.0">
,但是图像仍然没有改变大小。
我什至尝试了一些CSS,但这只是一种尺寸:与计算机相同,可以容纳平板电脑或手机。
有什么帮助吗?
JavaScript有帮助吗?
解决方法
您应该使用视口单元来做到这一点。
img {
display: block;
width: 100vw;
object-fit: cover;
}
<img src="https://via.placeholder.com/1500" />
,
<img src='' style='width: 100%; object-fit:cover'/>
,
我认为您可以将图像的宽度设置为100%。示例:
img {
width: 100%;
}
或者,如果您希望将其作为页面的背景图像,则可以使用background-image元素。示例:
body {
background-image: url(your image name);
background-size: cover;
}
我不确定这是否行得通。至少可以尝试。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。