在html中设置混淆

Question

我的图像在所有屏幕上的大小都相同。我正在尝试使用"img"html标记的"srcset"属性，但它没有按预期工作。我就是这样度过的。

<img style={{ width: 68 , height: 68}} src={image.url} }
srcSet={`
${image.w120} 120w, 
${image.w180} 180w,
${image.w230} 230w, `} /> ..// syntax is because the react

但当浏览器渲染时，它坚持计算屏幕的宽度，而不是图像。证据是，所有报告的"宽度"都是照片变化的边界。但我不想因为屏幕大小而交换照片，而是因为img标签中渲染的内容的大小。

99%的例子都使用了媒体查询，我不需要它。事实上，如果我必须对图像中的比例进行一些操作，我不会从考虑html内部的布局中受益，而是沉浸在.css中。我只需要图像是一个好女孩，浏览器称之为最适合我在css文件中定义的。我疯了吗，还是这比html中的媒体查询好得多？

Answer 1

方法1:-

问题是，有了srcset，如果你已经下载并缓存了更大的分辨率，当你的视口缩小时，它不会把它换成更小的分辨率。

如何测试因此，如果您想测试这一点，只需缩小窗口，然后加载页面(在清除缓存/或使用隐姓埋名模式后(。您将获得手机版或平板电脑版。然后，通过放大窗口，你会在某个时候看到浏览器切换到更高分辨率的图片。

<img sizes="(min-width: 1200px) 730w,
(max-width: 1199px) 610w,
(max-width: 640px) 350w"
srcset="https://html.com/wp-content/uploads/flamingo4x.jpg 730w,
https://www.w3schools.com/tags/img_pink_flowers.jpg 610w,
https://www.websiterealizer.com/help/drex_how-to-insert-a-hero-image_custom.png 480w"
src="/img/blog/reponsive-images.png"
alt="responsive images">

方法2:-它很容易工作。

<picture>
<source media="(min-width:1200px)" srcset="https://html.com/wp-content/uploads/flamingo4x.jpg">
<source media="(min-width:640px)" srcset="https://www.w3schools.com/tags/img_pink_flowers.jpg">
<source media="(min-width:280px)" srcset="https://www.websiterealizer.com/help/drex_how-to-insert-a-hero-image_custom.png">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>