代码之家 › 专栏 › 技术社区 › Lokesh Pandey haseeb

完美地放置比屏幕大的图像

media-queries css3 css html

0

Lokesh Pandey haseeb · 技术社区 · 7 年前

我对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 )不会损失图像质量。

此外,我还试图让图像完全适合其他分辨率,以及使用相同的图像,所以我使用的是媒体查询。

我怎样才能做到这一点?

当做

4 回复 | 直到 7 年前

1

Matt 7 年前

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>

2

0

CodeRonin 7 年前

 /*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"); }
 }

3

0

Suraj Libi 7 年前

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

4

0

Lokesh Pandey haseeb 7 年前

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