gpt4 book ai didi

javascript - 背景图像大于视口(viewport)

转载 作者:太空宇宙 更新时间:2023-11-04 08:23:03 25 4
gpt4 key购买 nike

假设我有智能手机访问我的网站

    <meta name="viewport" content="width=360, initial-scale=1.0, user-scalable=no" />

还有一张像 1000x1000 这样的大背景图片。

我只想能够固定我的背景图像的大小,即使它比视口(viewport)大,以允许缩放之类的东西。

<body style="background: black url('pic.jpg') no-repeat; ">

在原始尺寸下效果很好,但是

<body style="background: black url('pic.jpg') no-repeat; background-size:750px">

将我的图片大小限制为视口(viewport)宽度。

所以我的问题是:如果背景图像大小大于视口(viewport)宽度,我如何将其设置为任意值?

最佳答案

background-size 设置为 100% 100% 以拉伸(stretch)并且不保持纵横比。

background-size 设置为 cover 以拉伸(stretch)、裁剪冗余部分并保持纵横比。

background-size 设置为 contain 以拉伸(stretch),在需要的地方添加额外的空间并保持宽高比。

关于javascript - 背景图像大于视口(viewport),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45401602/

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