CSS Desktop vs Mobile保持背景图像可见

Question

我有以下网站：

www.thewhozoo.com

从宽度超过1240像素的屏幕查看时，它会并排显示图像。使用低于1240像素的屏幕（例如移动电话），它会将图像显示在彼此之下。这可以通过以下方式实现：

@media only screen and (max-width: 1240px) {

一切正常。

我的问题是背景图片：

.top-container {
    float: left;
    width: 100%;
    background: linear-gradient( rgba(0,0,0,0.1), rgba(0, 0, 0, 0.1) ),url('../images/background1.jpg') no-repeat center center fixed; 
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;
  }

当浏览器足够宽时（例如此处为930px），它会显示：

但是使用较窄的浏览器（例如480px）或移动设备，它会显示：

如您所见，在图像中，背景工作“WORK”在第二个屏幕中被切断。

问题

是否可以在css中设置最小宽度，以便无论浏览器的大小如何，“WORK”一词始终可见？

这将为较小的浏览器提供效果，就像他们从更远的地方查看页面一样（缩小）。

谢谢。

Answer 1

background-size: cover设置可确保整个元素始终由背景图像填充。在您的情况下，移动版本显示图像的完整高度并将其水平居中，这样就可以左右切割。如果你将它显示得更小（这对于看到整个单词“work”是必要的），高度也会缩小，并且图像将不再填充窗口。

您可以尝试background-size: contain，它将始终显示整个图像，但会在顶部和底部或左右两侧留下空白区域，具体取决于方向。但结合背景颜色，这可能是你可以忍受的东西。

Answer 2

尝试background-size: 100% 100%或background-size: 100%

希望这有帮助！

Answer 3

您可以做的是制作背景图像的两个副本，当浏览器调整到最小宽度时，您可以使用javascript（jquery）将背景图像从大型版本交换到小版本。

或者您可以为背景设置样式：

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;