Html 具有“自动”高度的 100% 宽度背景图像

100% width background image with an 'auto' height

提问by Darryl Young

I'm currently working on a mobile landing page for a company. It's a really basic layout but below the header there's an image of a product which will always be 100% width (the design shows it always going from edge to edge). Depending on the width of the screen the height of the image will obviously adjust accordingly. I originally did this with an img (with a CSS width of 100%) and it worked great but I've realised that I'd like to use media queries to serve different images based on different resolutions - let's say a small, medium and a large version of the same image, for example. I know you can't change the img src with CSS so I figured I should be using a CSS background for the image as opposed to an img tag in the HTML.

我目前正在为一家公司设计移动登陆页面。这是一个非常基本的布局，但在标题下方有一个产品图像，该图像始终为 100% 宽度（设计显示它总是从边缘到边缘）。根据屏幕的宽度，图像的高度显然会相应地调整。我最初是用一个 img（CSS 宽度为 100%）来做这个的，它工作得很好，但我意识到我想使用媒体查询来提供基于不同分辨率的不同图像 - 假设一个小、中和例如，同一图像的大版本。我知道你不能用 CSS 更改 img src，所以我想我应该为图像使用 CSS 背景，而不是 HTML 中的 img 标签。

I can't seem to get this working properly as the div with the background image needs both a width and a height to show the background. I can obviously use 'width: 100%' but what do I use for the height? I can put a random fixed height like 150px and then I can see the top 150px of the image but this isn't the solution as there isn't a fixed height. I had a play and found that once there is a height (tested with 150px) I can use 'background-size: 100%' to fit the image in the div correctly. I can use the more recent CSS3 for this project as it's aimed solely at mobile.

我似乎无法正常工作，因为带有背景图像的 div 需要宽度和高度来显示背景。我显然可以使用 'width: 100%' 但我用什么来表示高度？我可以设置一个随机的固定高度，比如 150px，然后我可以看到图像的顶部 150px，但这不是解决方案，因为没有固定的高度。我玩了一下，发现一旦有高度（用 150px 测试），我就可以使用 'background-size: 100%' 来正确地将图像放入 div 中。我可以在这个项目中使用更新的 CSS3，因为它只针对移动设备。

I've added a rough example below. Please excuse the inline styles but I wanted to give a basic example to try and make my question a little clearer.

我在下面添加了一个粗略的例子。请原谅内联样式，但我想举一个基本的例子来尝试让我的问题更清楚一些。

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

Do I maybe have to give the container div a percentage height based on the whole page or am I looking at this completely wrong?

我是否可能必须根据整个页面为容器 div 指定一个百分比高度，或者我认为这完全错误？

Also, do you think CSS backgrounds are the best way to do this? Maybe there's a technique which serves different img tags based on device/screen width. The general idea is that the landing page template will be used numerous times with different product images so I need to make sure I develop this the best way possible.

另外，你认为 CSS 背景是最好的方法吗？也许有一种技术可以根据设备/屏幕宽度提供不同的 img 标签。总体思路是着陆页模板将多次用于不同的产品图像，因此我需要确保以最佳方式开发此模板。

I apologise is this is a little long-winded but I'm back and forth from this project to the next so I'd like to get this little thing done. Thanks in advance for your time, it's much appreciated. Regards

我很抱歉这有点啰嗦，但我在这个项目和下一个项目之间来回切换，所以我想完成这件小事。提前感谢您的时间，非常感谢。问候

采纳答案by maksbd19

Instead of using background-imageyou can use imgdirectly and to get the image to spread all the width of the viewport try using max-width:100%;and please remember don't apply any padding or margin to your main container div as they will increase the total width of the container. Using this rule you can have a image width equal to the width of the browser and the height will also change according to the aspect ratio. Thanks.

除了使用，background-image您可以img直接使用并让图像扩展视口的所有宽度尝试使用max-width:100%;，请记住不要对主容器 div 应用任何填充或边距，因为它们会增加容器的总宽度。使用此规则，您可以使图像宽度等于浏览器的宽度，并且高度也会根据纵横比而变化。谢谢。

Edit: Changing the image on different size of the window

编辑：在不同大小的窗口上更改图像

$(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>

In this way you change your image in different size of the browser.

通过这种方式，您可以在不同大小的浏览器中更改图像。

回答by cr0ybot

Tim S. was much closer to a "correct" answer then the currently accepted one. If you want to have a 100% width, variable height background image done with CSS, instead of using cover(which will allow the image to extend out from the sides) or contain(which does not allow the image to extend out at all), just set the CSS like so:

Tim S. 比目前接受的答案更接近“正确”的答案。如果您想使用 CSS 完成 100% 宽度、可变高度的背景图像，而不是使用cover（这将允许图像从侧面伸出）或contain（它根本不允许图像向外伸出），只需像这样设置 CSS：

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

This will set your background image to 100% width and allow the height to overflow. Now you can use media queries to swap out that image instead of relying on JavaScript.

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

EDIT: I just realized (3 months later) that you probably don't want the image to overflow; you seem to want the container element to resize based on it's background-image (to preserve it's aspect ratio), which is not possible with CSS as far as I know.

编辑：我刚刚意识到（3 个月后）您可能不希望图像溢出；您似乎希望容器元素根据它的背景图像调整大小（以保持其纵横比），据我所知，这在 CSS 中是不可能的。

Hopefully soon you'll be able to use the new srcsetattribute on the imgelement. If you want to use imgelements now, the currently accepted answer is probably best.

希望很快您就可以在元素上使用新的srcset属性img。如果您img现在想使用元素，目前接受的答案可能是最好的。

However, you can create a responsive background-image element with a constant aspect ratio using purely CSS. To do this, you set the heightto 0 and set the padding-bottomto a percentage of the element's own width, like so:

但是，您可以使用纯 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;
}

In order to use different aspect ratios, divide the height of the original image by it's own width, and multiply by 100 to get the percentage value. This works because padding percentage is always calculated based on width, even if it's vertical padding.

为了使用不同的纵横比，将原始图像的高度除以其自身的宽度，再乘以100得到百分比值。这是有效的，因为填充百分比总是基于宽度计算，即使它是垂直填充。

回答by Mo.

Try this

尝试这个

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;
}

Simplified version

简化版

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

回答by Tim S.

You can use the CSS property background-sizeand set it to coveror contain, depending your preference. Cover will cover the window entirely, while contain will make one side fit the window thus not covering the entire page (unless the aspect ratio of the screen is equal to the image).

您可以使用 CSS 属性background-size并将其设置为cover或contain，具体取决于您的偏好。Cover 将完全覆盖窗口，而 contains 将使一侧适合窗口，因此不会覆盖整个页面（除非屏幕的纵横比等于图像）。

Please note that this is a CSS3 property. In older browsers, this property is ignored. Alternatively, you can use javascript to change the CSS settings depending on the window size, but this isn't preferred.

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

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

回答by Alexey Kaverin

Just use a two color background image:

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

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

回答by Tariq Javed

Add the css:

添加css：

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

And html is:

和 html 是：

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

CSS: stretching background image to 100% width and height of screen?

CSS：将背景图像拉伸到屏幕的 100% 宽度和高度？

回答by Nick

It's 2017, and now you can use object-fitwhich has decent support. It works in the same way as a div's background-sizebut on the element itself, and on any element including images.

现在是 2017 年，现在您可以使用具有良好支持的object-fit。它的工作方式与 div 相同，但适用于元素本身以及包括图像在内的任何元素。background-size

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

回答by Mostafa Norzade

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