具有"自动"高度的100%宽度背景图像

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

Tim S.更接近于当前接受的"正确"答案.如果你想要一个100%宽度,可变高度的背景图像用CSS完成,而不是使用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创建具有恒定宽高比的响应式背景图像元素.要执行此操作,请将" height0"设置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>

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