如何制作响应式背景照片

Question

当我有电脑大小的屏幕时，我可以在后台看到整只猫，但在手机大小的屏幕上，只有这只猫的一部分。它不小，但它是正常的大小和剪裁。如何使照片具有响应性或在较小的屏幕上更改照片(使用其他比例(？

HTML:

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

Answer 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>

Answer 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>

Answer 3

这是一个非常简单快乐的程序员使用链接标签在html顶部链接引导程序cdn下载bootstrap.min.css''

然后做一个'

将您的图像代码放在此处'