100％宽度的背景图片，高度为“自动”

100％宽度的背景图片，高度为“自动”

除了直接使用外，

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>

这样，您可以在不同大小的浏览器中更改图像。