在没有 JavaScript 的情况下调整 HTML 中的图像大小答案

【问题标题】：Resize an image in HTML without JavaScript在没有 JavaScript 的情况下调整 HTML 中的图像大小
【发布时间】：2016-07-18 01:16:00
【问题描述】：

我使用媒体查询在不同的断点上调整图片大小，我不想使用 JS 来调整大小并希望将所有内容都保存在 html 中，因为我想在网站上使用工艺作为 CMS 并希望拥有动态生成的代码，我一直在阅读大量的网站和博客，它们都是开始让我越来越困惑..像这样使用图片标签真的是一个聪明的解决方案吗：

<picture>
  <source srcset="img/news.jpg" media="(min-width: 1429px)">
  <source srcset="img/news_m.jpg" media="(min-width: 960px)">
  <source srcset="img/news.jpg" media="(min-width: 460px)">
  <img srcset="img/news_m.jpg"/>
</picture>

我无法弄清楚 img 方式（setsrc 和 w 等）它从来没有真正起作用。

【问题讨论】：

标签： html image resize

【解决方案1】：

在带有 CSS 的 HTML 中，您可以执行以下操作：

<img src="img/news.jpg" style="min-width:1429px;" />

如果你想进行 Web 开发，你应该阅读 HTML 和 CSS。

【讨论】：

一切正常，我只是想知道图片标签方式是否可以。我正在参考这样的文章：smashingmagazine.com/2014/05/…
我没有跟上图片标签的速度。似乎它意味着前进的道路，所以是的，你可以。我通常使用新的 Web 技术检查 MDN 以了解哪些浏览器支持它们以及它们改变的可能性有多大。当它还没有成为标准时，它总是有可能改变或被删除，在这种情况下你也必须改变你的代码。

【解决方案2】：

我正在使用图片填充作为后备..它工作正常..如果有人想知道:-) 谢谢大家

https://scottjehl.github.io/picturefill/

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="img/news.jpg" media="(min-width: 1429px)">
  <source srcset="img/news_m.jpg" media="(min-width: 960px)">
  <source srcset="img/news.jpg" media="(min-width: 460px)">
  <!--[if IE 9]></video><![endif]-->
  <img srcset="img/news_m.jpg" alt="My default image">
</picture>

【讨论】：