如何制作响应式背景照片？答案

【问题标题】：How to make responsive background photo?如何制作响应式背景照片？
【发布时间】：2022-01-04 19:26:18
【问题描述】：

虽然有电脑大小的屏幕，我可以在背景中看到整只猫，但在手机大小的屏幕上，只有这只猫的一部分。它并不小，但它是正常尺寸和切割的。有什么方法可以让照片响应或在较小的屏幕上更改照片（以其他比例）？

HTML：

    <div class="bg-image" style="background-image: url('img/cattery/main-photo-cut.jpg'); background-size: cover; background-position: relative; height: 100vh;">
</div>

【问题讨论】：

标签： html bootstrap-4 responsive-design background-image

【解决方案1】：

试试background-position:center;

<div class="bg-image" style="background-image: url('img/cattery/main-photo-cut.jpg'); background-size:cover;background-position:center; background-repeat:no-repeat;height: 100vh;">
    </div>

【讨论】：

【解决方案2】：

补充 Sunil 的好建议，有时在所有设备上使用相同的背景图像很难获得好的结果。尤其是当您考虑到桌面视口通常是横向格式，而移动视口通常是纵向格式时。

如果是这种情况，您可以做的是使用媒体查询在桌面和移动设备上定义不同的背景图像。

这样做的好处是您可以同时使用横向和纵向格式的背景图片。

它的效率也稍高一些，因为您可以为移动设备指定较小的图像，因此速度会更快。

CSS

.bg-image{
    background-size:cover;
    background-position:center; 
    background-repeat:no-repeat;
}

/* use portrait format background image on mobile */
@media(max-width:600px){
 .bg-image{
  background-image: url('img/cattery/mobile-photo-cut-protrait.jpg');
 }
}

/* use landscape format background image on tablet and desktop */
@media(min-width:601px){
 .bg-image{
  background-image: url('img/cattery/main-photo-cut-landscape.jpg');
 }
}

HTML

<div class="bg-image" >
</div>

【讨论】：

【解决方案3】：

很简单快乐的程序员使用链接标签在您的 html 顶部链接 bootstrap cdn 下载 bootstrap.min.css ''

然后做一个 '

把你的图片代码放在这里 '

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。