Question

我有一个图像作为背景，但是当它在较小的屏幕（即iPhone）上观看时它不会调整大小。我在手机屏幕上附上了一张照片以及代码。

如果有人就如何修改它以适应我的屏幕而不看起来那么疯狂有任何建议，那就太棒了。谢谢！

#bgsecond {
    position: absolute; 
    top: 0%; 
    left: 0%; 
    width: 100%; 
    height: 100%;
    z-index: -100;
    opacity: 0.90;
  }

#bgsecond img {
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    min-width: 200;
    min-height: 100%;
  }

Answer 1

正如@ Sean-Stopnik所指出的那样，background-size: cover将会成功。 background-size: 100% 100%会将图像拉伸到其容器的尺寸，而background-size: cover会在填充整个容器时显示尽可能多的图像（不拉伸）。它会裁剪图像，但您可以使用background-position来控制裁剪图像的位置。

Answer 2

将以下内容添加到CSS代码中：

background-size: 100% 100%;

响应式设计 - 压扁的背景图像

2 个答案: