在不 JavaScript 的情况下 HTML 调整图像大小

Question

我曾使用媒体查询在不同的断点处调整图片大小，我不想使用 JS 来调整大小并希望在 html 中拥有所有内容，因为我想在网站上使用 craft 作为 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 方式（setrc 和 w 等）它从未真正起作用。

Answer 1

在 HTML 和 CSS 中你会做这样的事情：

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

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

Answer 2

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

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>

在不 JavaScript 的情况下 HTML 调整图像大小

Resize an image in HTML without JavaScript

html

resize

image