如何调整完整图像的高度作为背景适合chrome /任何浏览器而不裁剪它？

Question

我是css的初学者，想要在背景上设置图像。我试图将图像高度设置为适合屏幕而不裁剪图像。我只想让滚动条消失。这是代码

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .bgimage {
            background-position: center center;
margin: 0px 0px 0px 0px;
background-image:  url('Images/56216134.jpg');
background-size: 100%;
background-repeat: no-repeat;
width: 100%;
height: 1000px;
padding: 0px 0px 0px 0px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="bgimage">
        </div>
    </form>
</body>
</html>

Answer 1

你可以做的是设置你的div高度等于你的form的100％（如果你的form是body的100％高度）。

然后你必须将你的background-image大小属性设置为“包含”：

background-size: contain;

关键字contains将调整背景图像的大小以确保其完全可见。

更多信息about background-size property。

这是一个代码片段示例：

html, body, form{
  width: 100%;
  height: 100%;
}

.bgimage {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://www.capebretonpost.com/media/photologue/photos/cache/yv-23052017-billcurry-1_large.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

<body>
  <form id="form1" runat="server">
    <div class="bgimage">
    </div>
  </form>
</body>

如果您希望图像占据整个宽度，则可以使用background-size: cover;，如下所示：

html, body, form{
  width: 100%;
  height: 100%;
}

.bgimage {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://www.capebretonpost.com/media/photologue/photos/cache/yv-23052017-billcurry-1_large.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

<body>
  <form id="form1" runat="server">
    <div class="bgimage">
    </div>
  </form>
</body>

Answer 2

这很简单，你可以使用height:100vh和background-size: 100% 100%;

请阅读有关100vh的信息

让我进一步澄清。

希望这有帮助。

        .bgimage {
    background-position: center center;
    margin: 0px 0px 0px 0px;
    background-image: url(https://dummyimage.com/600x400/000/fff);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 1000px;
    padding: 0px 0px 0px 0px;
    min-height: 100vh;

<html>
<head>
	<title>Full height demo</title>
</head>
<body>
    <form id="form1" runat="server">
        <div class="bgimage">
        </div>
    </form>
</body>
</html>

Answer 3

调整背景图像的大小以覆盖整个容器，即使它必须使用以下方法拉伸图像或从其中一个边缘切掉一点：

.bgimage { background-size: cover; }

Answer 4

正如您使用类.bgImage，将其宽度设置为width: 100%并在javascript中使用页面加载函数将其高度设置为window.innerHeight;

Answer 5

试试这个background-size它可以拉伸背景图像并覆盖整个背景而不会裁剪。甚至宽度和高度根据您的需要设定。

 .bgimage { 
         background-size:100% 100%;
       }

Answer 6

你快到了！我认为background-size: cover;是你正在寻找的，这将确保div被覆盖并显示大部分图像（为了覆盖div，尽可能少地切断）。

你可以包括height: 100vh，以使其全屏高度。

body { margin: 0; } /* This is just for the example - to make it full screen*/

.bgimage {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  background-image: url('https://picsum.photos/500/1000');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

<body>
  <form id="form1" runat="server">
    <div class="bgimage">
    </div>
  </form>
</body>

我还包括一个使用所有背景属性的简写版本的版本 - 我更喜欢使用它，因为我发现它更容易和更清晰阅读。但如果你愿意，你可以单独使用它们 - 没有区别。你可以在这里阅读：https://www.w3schools.com/cssref/css3_pr_background.asp

body { margin: 0; } /* This is just for the example - to make it full screen*/

.bgimage {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  
  background: url('https://picsum.photos/500/1000') center/cover no-repeat;
}

<body>
  <form id="form1" runat="server">
    <div class="bgimage">
    </div>
  </form>
</body>

如何调整完整图像的高度作为背景适合chrome /任何浏览器而不裁剪它？

问题描述投票：1回答：6

6个回答

最新问题

如何调整完整图像的高度作为背景适合chrome /任何浏览器而不裁剪它？

问题描述 投票：1回答：6

6个回答

最新问题

问题描述投票：1回答：6