Question

在移动设备上查看时，我的背景图片会发生以下情况。如何在不更改图像的情况下调整大小或裁剪它，使其覆盖整个页面。

Answer 1

您必须为桌面实施background-size: cover;，并使用媒体查询为移动设备和平板电脑实施优化的背景图片。（创建单个图像 - 一个用于桌面，一个用于移动，一个用于平板电脑）

不幸的是，background-size:cover在移动设备和iOS设备上容易破裂和消失！

您的代码看起来像这样的防弹设计（调整您的自定义高度等）：

section {
    background-image: url(section-bg-mobile.jpg);
    background-position: center center;    
    height: 500px;
}
@media (min-width:768px) {
    section {
        background-image: url(section-bg.jpg);
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
        min-height: 725px;
    }
}

Answer 2

这是您要使用的CSS：

.background-element {
   background-image: url("http://wherever.com/your-img.jpg");
   background-size: cover;
   background-position: center; /* or 50% 50% */
   background-repeat: no-repeat;
 }

background-size: cover 会展开图片以填充其容器， background-position：center 将会， center 。

当然，这将要求图像为背景的元素为视口宽度和高度的100％。

.background-element {
   background-image: url("http://wherever.com/your-img.jpg");
   background-size: cover;
   background-position: center; /* or 50% 50% */
   background-repeat: no-repeat;

   position: fixed;
   z-index: -1;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
 }

或

.background-element {
   background-image: url("http://wherever.com/your-img.jpg");
   background-size: cover;
   background-position: center; /* or 50% 50% */
   background-repeat: no-repeat;

   width: 100%;
   height: 100%;
   /* or height: 100vh; */
 }

取决于您的元素是否分别是body元素或body元素本身的子元素。

Answer 3

你可以使用bootstrap框架。要链接bootstrap freamework，请使用以下代码。

<head>
		
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel='stylesheet' type='text/css' />
		
</head>

在正文部分中重新调整背景图片的大小后，您可以根据移动设备img-responsive类的大小使用。按照下面的代码片段来实现相同的功能。

<body>
    <img src=".." alt="background-Img" class="img-responsive">
</body>

如何在手机上查看或视口尺寸减小时阻止背景图像被切断？

3 个答案: