Question

我目前正在为公司制作移动登录页面。这是一个非常基本的布局，但在标题下面有一个产品的图像，它总是100％宽度（设计显示它总是从边缘到边缘）。根据屏幕的宽度，图像的高度显然会相应调整。我最初使用img（CSS宽度为100％）做了这个并且效果很好但是我意识到我想使用媒体查询来根据不同的分辨率提供不同的图像 - 比方说小，中等和例如，同一图像的大版本。我知道你不能用CSS改变img src所以我想我应该使用CSS背景作为图像，而不是HTML中的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标签。一般的想法是，着陆页模板将多次使用不同的产品图像，因此我需要确保尽可能以最佳方式开发。

我很抱歉这是一个有点啰嗦的但是我从这个项目到另一个项目来回走动所以我想完成这件小事。在此先感谢您的时间，非常感谢。此致

Answer 1

蒂姆S.更接近于当前接受的“正确”答案。如果您想要使用CSS完成100％宽度，可变高度的背景图像，而不是使用cover（这将允许图像从侧面伸出）或contain（不允许）要延伸出来的图像），只需像这样设置CSS：

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

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

编辑：我刚刚意识到（3个月后）您可能不希望图像溢出;你似乎希望容器元素根据它的背景图像调整大小（以保持它的纵横比），据我所知，这是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得到百分比值。这是有效的，因为填充百分比总是根据宽度计算，即使它是垂直填充。

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

Answer 3

您可以使用CSS属性background-size并将其设置为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 */
}

Answer 4

您可以直接使用background-image而不是使用img并使图片展开视口的所有宽度，请尝试使用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>

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

Answer 5

只需使用双色背景图片：

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

Answer 6

添加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: stretching background image to 100% width and height of screen?

Answer 7

现在是2017年，现在您可以使用object-fit decent support。它的工作方式与div的background-size相同，但在元素本身和包括图像在内的任何元素上都有效。

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

Answer 8

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

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

8 个答案: