97

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

我似乎无法正常工作，因为带有背景图像的 div 需要一个宽度和一个高度来显示背景。我显然可以使用 'width: 100%' 但我用什么来表示高度？我可以放置一个随机的固定高度，例如 150px，然后我可以看到图像的顶部 150px，但这不是解决方案，因为没有固定高度。我玩了一下，发现一旦有高度（用 150 像素测试），我可以使用“背景尺寸：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 标签。总体思路是，着陆页模板将多次用于不同的产品图片，因此我需要确保以最佳方式开发此模板。

抱歉，这有点啰嗦，但我从这个项目到下一个项目来来回回，所以我想完成这件小事。提前感谢您的宝贵时间，非常感谢。问候

4

8 回答 8

224

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

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

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

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

希望很快您就可以在元素上使用新的srcset属性img。如果您现在想使用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得到百分比值。这是有效的，因为填充百分比总是基于宽度计算，即使它是垂直填充。

于 2013-01-21T20:28:30.483 回答
21

尝试这个 

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;
}
于 2013-05-19T18:54:06.900 回答
20

除了使用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>

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

于 2012-06-19T11:35:07.110 回答
17

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

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

body {
    background-image: url(image.jpg); /* image */
    background-position: center;      /* center the image */
    background-size: cover;           /* cover the entire window */
}
于 2012-06-19T11:34:34.113 回答
4

只需使用两色背景图像：

<div style="width:100%; background:url('images/bkgmid.png');
       background-size: cover;">
content
</div>
于 2014-03-01T14:38:46.890 回答
2

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

.your-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
于 2017-10-21T06:15:27.837 回答
2

添加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% 宽度和高度？

于 2017-02-02T08:41:20.673 回答
1 
html{
    height:100%;
    }
.bg-img {
    background: url(image.jpg) no-repeat center top; 
    background-size: cover; 
    height:100vh;     
}
于 2018-08-11T09:51:25.820 回答