具有“auto”高度的100％宽度背景图像

Question

我目前正在为一家公司制作移动端着陆页。这是一个非常基本的布局，但在标题下方有一个产品图像，它将始终占据100％的宽度（设计显示它始终从边缘到边缘）。根据屏幕的宽度，图像的高度会相应地调整。最初我使用CSS宽度为100％的img（图片）完成了这个图像，效果很好，但我意识到我想使用媒体查询来提供不同分辨率的图片 - 假设是同一张图片的小，中和大版本。

我知道不能通过CSS更改img的src，因此我认为应该在HTML中使用CSS背景而不是img标记。但我无法正确设置具有背景图像的div的宽度和高度。我可以使用 'width：100％'，但高度该怎么办？我可以放置一个随机固定高度，如150px，然后我可以看到图像的顶部150px，但这不是解决方案，因为高度并不是固定的。我试着玩了一下，发现一旦有了高度（用150px测试），我就可以使用“background-size: 100％”来正确地将图像适应到div中。由于该项目仅针对移动端，所以我可以使用更新的CSS3。

我在下面添加了一个简单的示例。请原谅我使用内联样式，但我希望给出一个基本示例，以使我的问题更清晰。

<div id="image-container">
    <div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div>
</div>

我是不是需要给容器div设置基于整个页面的百分比高度？或者我完全理解错了吗？

另外，你觉得CSS背景是做这件事情的最佳方式吗？也许有一种技术可以根据设备/屏幕宽度为不同的img标签提供服务。总体思路是，落地页模板将被多次使用，具有不同的产品图片，因此我需要确保以最佳方式开发此功能。

如果我有些啰嗦，我很抱歉，因为我在这个项目和下一个项目之间反复跳转，所以我想完成这个小事情。

- Darryl Young

---

如果一个浏览器检测到一个图像资源的display属性为none，它可能选择不下载该资源，因此您可以始终使用媒体查询显示不同的图像而无需使用JS。 - Ben Taliadoros

Answer 1

Tim S.的答案比当前被接受的答案更加正确。如果你想要使用CSS创建一个宽度为100%，高度可变的背景图片，而不是使用cover（会让图片延伸到边缘之外）或者contain（不允许图片延伸到任何地方），只需按照以下方式设置CSS：

body {
    background-image: url(img.jpg);
    background-position: center top;
    background-size: 100% auto;
}

这将将您的背景图像设置为100％宽度，并允许高度溢出。现在，您可以使用媒体查询来替换该图像，而不是依赖JavaScript。

编辑：我刚刚意识到（三个月后）您可能不希望图像溢出；您似乎希望容器元素根据其背景图像调整大小（以保持其纵横比），但我不知道CSS是否支持此操作。

希望不久之后您将能够在img元素上使用新的 srcset 属性。如果您现在想要使用img元素，则目前接受的答案可能是最佳选择。

然而，您可以使用纯CSS创建具有恒定纵横比的响应式背景图像元素。为此，您将height设置为0，并将padding-bottom设置为元素自身宽度的百分比，如下所示：

.foo {
    height: 0;
    padding: 0; /* remove any pre-existing padding, just in case */
    padding-bottom: 75%; /* for a 4:3 aspect ratio */
    background-image: url(foo.png);
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
}

为了使用不同的比例，将原始图像的高度除以宽度，并乘以100以获得百分比值。这是行得通的，因为填充百分比总是基于宽度计算的，即使它是垂直填充。

- cr0ybot

---

像这样的答案应该被接受，它们回答了问题。当然给出一个“最佳解决方案”，但也要回答问题，这样当人们找到它们时，他们将得到他们想要的答案！ - tim.baker

这对我不起作用，我正在使用Google Chrome 47.0。这可能是因为答案已过时吗？ - MeV

你能具体说明哪一部分出了问题吗？我给出了几个可能的答案，所以如果有一部分不起作用，我可以进一步阐述，以便提供更好和更实时的答案。 - cr0ybot

由于某些不明原因，在所有设备方向上设置background-size: auto解决了我的问题。 - n__o

Answer 2

试一试这个

html { 
  background: url(image.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

简化版

html {
  background: url(image.jpg) center center / cover no-repeat fixed;
}

- Mo.

Answer 3

你可以直接使用img标签来代替background-image，并通过使用max-width:100%;让图像铺满整个视口宽度。

请记住：不要在主容器div中应用任何填充或边距，因为它们会增加容器的总宽度。使用这条规则，您可以拥有与浏览器宽度相等的图像宽度，高度也会根据纵横比例而变化。

编辑：更改窗口大小时的图像

$(window).resize(function(){
  var windowWidth = $(window).width();
  var imgSrc = $('#image');
  if(windowWidth <= 400){           
    imgSrc.attr('src','http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a');
  }
  else if(windowWidth > 400){
    imgSrc.attr('src','http://i.stack.imgur.com/oURrw.png');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-container">
  <img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt=""/>
</div>

这样，您可以在不同大小的浏览器中更改您的图像。

- maksbd19

---

谢谢您抽出时间为我做这件事，非常感激。我刚试了一下，似乎可以工作。 - Darryl Young

这个旧答案看起来很有吸引力...但是难道移动浏览器不会仍然下载（只是不显示）最初在HTML中设置为src的图像吗？如果是这样，那就行不通了，因为重点是节省移动设备的资源。 - Tim Gallant

我相信Tim Gallant是正确的 - 在这种情况下，浏览器将加载两个图像作为资源，然后只显示较低分辨率的图像。因此，虽然这看起来很有吸引力，但在移动设备上实际上比仅加载高分辨率图像更慢，并且通过这种牺牲，您只会看到较低分辨率的图像...最糟糕的情况。 - little tiny man

糟糕的答案。已被踩。代码冗长且陈旧。 - TheBlackBenzKid

插入媒体查询，将 display: none 添加到您不想显示的图像中 - 大多数浏览器不会下载它们。 - Ben Taliadoros

Answer 4

你可以使用CSS属性background-size 并将其设置为 cover 或 contain, 根据你的喜好选择。cover会完全覆盖整个窗口，而contain则会使一侧适应窗口大小，因此不会覆盖整个页面（除非屏幕的宽高比等于图像的宽高比）。

请注意，这是一个CSS3属性，在旧浏览器中可能会被忽略。或者，你可以使用JavaScript根据窗口大小更改CSS设置，但这不是首选方法。

body {
    background-image: url(image.jpg); /* image */
    background-position: center;      /* center the image */
    background-size: cover;           /* cover the entire window */
}

- Tim S.

Answer 5

只需使用两种颜色的背景图片：

<div style="width:100%; background:url('images/bkgmid.png');
       background-size: cover;">
content
</div>

- Alexey Kaverin

Answer 6

现在是2017年，你可以使用object-fit，它具有较好的支持。它与div的background-size相同，但作用于元素本身，包括图片在内的任何元素都可以使用。

.your-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

- Nick

Answer 7

添加CSS代码：

   html,body{
        height:100%;
        }
    .bg-img {
        background: url(image.jpg) no-repeat center top; 
        background-size: cover; 
        height:100%;     
    }

HTML是什么：

<div class="bg-mg"></div>

CSS：如何将背景图片拉伸至屏幕的100％宽度和高度？

这篇文章讨论了如何使用CSS来实现将背景图片拉伸至屏幕的100%宽度和高度。

- Tariq Javed

Answer 8

html{
    height:100%;
    }
.bg-img {
    background: url(image.jpg) no-repeat center top; 
    background-size: cover; 
    height:100vh;     
}

- Mostafa Norzade

Answer 9

我也曾经遇到过你的问题。我想到了两个通过HTML和CSS解决的方案：

方案1）HTML img标签

.img-container {
    width: 100%;
    border: 1px solid #000;
}
.img-container img {
    width: 100%;
    pointer-events: none;
}

<div class="img-container">
  <img src="https://i.postimg.cc/ht1YnwcD/example.png">
</div>

解决方案2）CSS背景图片

首先找到您的图像文件的宽度和高度，您可以右键单击图像，然后选择属性，然后转到详细信息选项卡。您可以看到您的图像尺寸（根据图片）。 在此输入图像描述

然后记住它们。

.img-container {
    width: 100%;
    // height: calc(100vw / (your image width / image height));
    height: calc(100vw / (812 / 133));
    background-image: url('https://i.postimg.cc/ht1YnwcD/example.png');
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% auto;
    border: 1px solid #000;
}

<div class="img-container"></div>

希望这对你有用；）

- Mohammad Ali Yazdani