时间戳

首页 > 解决方案 > 如何在不裁剪的情况下将完整图像的高度调整为适合 chrome/任何浏览器的背景？

html - 如何在不裁剪的情况下将完整图像的高度调整为适合 chrome/任何浏览器的背景？

问题描述

我是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>

○

在此处输入图像描述

标签： htmlcss

解决方案

您可以做的是将您的div高度设置为您的 100% form（如果您form是 100% 的高度body）。

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

background-size: contain;

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

有关 background-size 属性的更多信息。

这是一个代码片段示例：

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>

推荐阅读