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

一尘不染

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

css

我目前正在为一家公司制作移动目标网页。这是一个非常基本的布局，但是在页眉下面有一个产品图片，该图片始终为100％的宽度（设计显示，该图片始终从一条边到另一条边）。根据屏幕的宽度，图像的高度显然会相应地进行调整。我最初使用img（CSS宽度为100％）来完成此操作，效果很好，但我意识到我想使用媒体查询根据不同的分辨率提供不同的图像-
假设尺寸较小，中等，例如，同一张图片的大版本。我知道您无法使用CSS更改img src，因此我认为我应该为图像使用CSS背景，而不是HTML中的img标签。

我似乎无法正常工作，因为带有背景图像的div需要宽度和高度才能显示背景。我显然可以使用“宽度：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标签。通常的想法是，目标网页模板将与不同的产品图片一起使用多次，因此我需要确保以最佳方式开发这种模板。

我很抱歉，这有点冗长，但是我从这个项目到下一个项目来回走动，所以我想把这件事做好。在此先感谢您的宝贵时间，不胜感激。问候

阅读 487

2020-05-16

共1个答案

一尘不染

除了直接使用外，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>

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

2020-05-16