Question

我是CSS和媒体查询的新手，我也遵循此thread，但并没有解决我的问题。我的图像大于屏幕分辨率。图片尺寸为1532 * 933，我的桌面分辨率为1366 * 768。我正在尝试制作一个页面，其中图像位于主体的背景中。我正在尝试完全适合屏幕上的图像。为此，我编写了此CSS

html, body {
    min-height: 100%;
}
body{
    font-family: 'Source Sans Pro', sans-serif;
    background-image: url("/public/images/image.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0, 0;
}

@media (min-width: 1024px), (min-height: 630px) {
    body { background-size: auto; }
}

但是我可以清楚地看到图像放置不正确。它从底部和右侧被切断。我想将此图像正确放置在全屏中（意味着top=0, bottom = 0, right = 0, left = 0），而又不损失图像质量。

此外，我也尝试使用同一张图片使该图片完全适合其他分辨率，所以我使用的是媒体查询。

我该如何实现？

致谢

Answer 1

我希望它可以帮助您

body, html {
    height: 100%;
}

.bg { 
    /* The image used */
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Red_flag.svg/1280px-Red_flag.svg.png");

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

<div class="bg"></div>


</body>
</html>

Answer 2

您有很多选择。如果仅在PC上需要此页面，则可以使用专用应用程序编辑图像，然后在页面中使用它。如果需要响应式布局，则应使用要提供的图像的多个版本作为背景图像，并使用媒体查询为设备选择合适的版本。假设您有一个名为image.jpg（500x500）的图像，可以使用高度和宽度强制调整大小，但是该图像将失去质量。但是，您可以使用以下媒体查询：

 /*width and height of an ipad*/
 @media (min-width: 768px), (min-height: 1024px) {
         body { background-image: url("/public/images/image_ipad.jpg"); }
 }

 /*width and height of a Galaxy S5*/
 @media (min-width: 360px), (min-height: 640px) {
         body { background-image: url("/public/images/image_galaxy.jpg"); }
 }

很显然，您可以选择媒体宽度更好地处理媒体查询，因此可以说从x宽度到y宽度，我将使用此图像，依此类推。请记住，为此，您可以使用矢量图像使事情变得更轻松。

Answer 3

尝试

@media (min-width: 1024px) and (min-height: 630px) {
    body { background-size: auto; }
}

Answer 4

我想出了一种方法来实现这一目标。我的图像现在完全对齐，没有任何失真。这是我的代码段：

.main-background {
	background: url("https://static-fastly.hackerearth.com/static/hackerearth/images/logo/HE_logo.png") no-repeat center;
    margin: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.main-content {
    height : 100vh;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body class="main-background">
	  <div class="main-content">
    </div>
</body>

完美放置比屏幕大的图像

4 个答案: