HTML 和 CSS 中的响应式图像答案

【问题标题】：Responsive Image in HTML and CSSHTML 和 CSS 中的响应式图像
【发布时间】：2017-08-10 03:00:54
【问题描述】：

使用css创建响应式图像的最佳方法是什么，我基本上是在屏幕为（最大宽度：480px）时切换标题图像这是我拥有的代码

<div id="header">
<img src="images/H550xW1250.png" alt="img" width="100%" class="size1280"/>
<img src="images/H683xW480.png" alt="img" width="100%" class="size480"/>
</div>

<style>
@media only screen and (max-width: 480px) {
.size1280 {
    display: none !important;
}
.size480 {
    display: block !important;
}
}
<style/>

【问题讨论】：

有什么问题？
我只是问这是一个好方法吗？还是有更好的方法？
这很好用，除非绝对必要，否则我会避免使用!important
不使用 !important 时由于某种原因无法正常工作。

标签： html css responsive-design media-queries responsive

【解决方案1】：

如何使用图片标签我认为这会容易得多。像这样

<picture>
   <source media="(min-width: 480px)" srcset="imgsrc">
   <img src="imgsrc">
</picture>

【讨论】：

你能解释一下吗！

【解决方案2】：

正如 Julian B 的帖子中提到的，picture 元素就是用来做这种事情的。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture https://www.html5rocks.com/en/tutorials/responsive/picture-element/

它让浏览器检查媒体查询并选择要显示的最佳图像文件。以下是它在您的 HTML 中的外观：

<div id="header">    
  <picture>
    <source media="(min-width: 480px) srcset="images/H550xW1250.png">
    <img src="images/H683xW480.png" alt="header image">
  </picture>
</div>

上面的代码默认显示较小的图像，但是当浏览器宽度大于 480px 时显示较大的图像。如果你有更多的图片尺寸可以切换，你可以添加更多的src 元素。

请注意，我使用的是min-width 查询而不是max-width。这意味着不理解图片元素的浏览器将默认显示小图像。

您可以在support table for picture 中看到大多数现代浏览器都支持它。如果您需要完全支持旧版 IE，可以使用polyfills。

【讨论】：

我试过了，但是没有用。无论浏览器大小如何，这两个图像都会同时显示。你可以在代码中添加另一个图像，一个是 480px W，另一个是 1200px W？谢谢
@Abdal - 道歉。 src 标签应该是 source。我已经在上面更正了。这是它应该如何工作的演示：Codepen example

【解决方案3】：

您所做的事情大多是正确的，但您没有考虑元素的默认样式。在您的情况下，您唯一关心的样式是 display 相应地成为 none 或 block。

因此请考虑以下示例，它完全符合您的要求。唯一的区别是我必须为我的图像width 和height 添加一些额外的样式；以及必须使用我自己的图像来表示示例。您需要做的就是点击查看全屏，缩小浏览器屏幕，然后观看奇迹发生。

然后呢？我知道默认的display 属性将是：block 表示它是可见的。但是当屏幕宽度达到某个点时，我让媒体查询负责将显示修改为none。这有助于避免使用important，因为没有什么可以覆盖的。我确保我也将它分开，只是因为它更容易阅读和理解正在发生的事情。

@media only screen and (max-width: 480px) {
  .size1280 {
      display: none;
  }
}

@media only screen and (min-width: 481px) {
  .size480 {
      display: none;
  }
}

.size1280 {
  width: 150px;
  height: 150px;
}

.size480 {
  width: 150px;
  height: 150px;
}

<div id="header">
  <img src="http://via.placeholder.com/150x150?text=1280" alt="img" class="size1280"/>
  <img src="http://via.placeholder.com/150x150?text=480" alt="img" class="size480"/>
</div>

【讨论】：