100％宽的背景图片，具有“自动”高度 [英] 100% width background image with an 'auto' height

问题描述

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

我似乎不能得到这个工作正常，因为背景图像的div需要宽度和高度来显示背景。我可以明显地使用width：100％，但是我对高度使用什么？我可以把一个随机固定的高度像150px，然后我可以看到图像的顶部150px，但这不是解决方案，因为没有固定的高度。我有一个戏剧，发现，一旦有一个高度（测试与150像素），我可以使用'background-size：100％'正确地适合图像在div。我可以使用更新的CSS3为这个项目，因为它完全针对移动。

我添加了一个粗略的例子如下。请原谅内联样式，但我想给一个基本的例子，让我的问题更清楚。

 < div id =image-container> 
< div id =imagestyle =background：url（image.jpg）no-repeat; width：100％; height：150px; background-size：100％;>< / div ; 
< / div> 
  

我可能要给容器div一个基于整个页面的百分比高度，在这完全错了吗？

此外，你认为CSS背景是最好的方法吗？也许有一种技术，根据设备/屏幕宽度服务不同的img标签。一般的想法是，着陆页模板将被多次使用不同的产品图片，因此我需要确保我开发这是最好的方法。

我道歉是这是一个有点长的风，但我来回从这个项目到下一个，所以我想要得到这个小事情做。感谢您提前为您的时间，这是非常感谢。
谨慎

解决方案

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

< data-lang =jsdata-hide =falsedata-console =truedata-babel =false>

  $（window）.resize（function（）{var windowWidth = $（window）.width（）; var imgSrc = $（'＃image'）; if < = 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 =imagesrc =http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575aalt =/> < / div>  

不同大小的浏览器。

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.

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.

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?

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.

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

解决方案

Instead of using background-image you can use img directly 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.

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.

这篇关于100％宽的背景图片，具有“自动”高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！