是否size需要与使用srcset？香港专业教育学院有一个网站具有大图像几乎全屏，除了一路50px董事会。此图像的比例不需要根据屏幕的不同比例/大小进行更改。
目前，即时通讯正像srcset这样使用：
<img
src="bath.jpg"
srcset="bath-large.jpg 1500w, bath-medium.jpg 1000w, bath-small.jpg 600w"
alt="#"
>
这样做的问题是，如果用户在桌面上使用压缩的浏览器打开网站（因此将加载小图像），然后扩大其浏览器窗口，则小图像将被缩放，因此现在将其像素化。（如果他们刷新页面，他们现在将获得大图或中图，但我怀疑在每次调整浏览器窗口大小后，是否有人会刷新页面）
通过使用该size属性，它将在重新调整浏览器窗口大小时尝试重新计算要使用的图像？如果不是，该size属性的用例是什么？
我正在尝试使用photoswipe插件单击图像时定义占位符.我想定义与我的屏幕上显示的图像完全相同的响应式图像版本.
data-srcset="
http://url.com/img-240.jpg 240w,
http://url.com/img-360.jpg 360w,
http://url.com/img-480.jpg 480w,
http://url.com/img-720.jpg 720w "
以上是我的图像的不同版本.
我的挑战是显示当前图像.为此,我使用了该currentSrc属性,该功能在Firefox和Chrome上运行良好,但在Safari上无效.
var currentSrc = imgEl.currentSrc || imgEl.src;
我没有找到任何有关Safari&的可能解决方案的信息currentSrc.
在整天阅读了一种方法之后,我仍然不确定什么对我最好,所有网站都解释同样的事情,但当我想知道真正让我担心的事情时,没有人谈论这个.
我的情况: 我几乎所有的图像都使用宽度100%和高度自动,图像容器有动态尺寸,例如30vw或40%等(不确定在这种情况下我是否还需要设置高度和img标签中的宽度值)
如果我想为我的图像和webp格式提供不同的大小并将决定权交给浏览器选择什么,我需要使用什么？
我可以提供没有图片和源标签的webp图片吗？我可以使用图片方法,仍然让浏览器选择显示的图像吗？
不确定为什么我们需要为最小的图像选择简单的img src后备,在这种情况下,如果有人进入IE和大屏幕,那么图像将始终是pixeled.在这些情况下,我更希望让一些用户等待一段时间,而不是为他们提供低分辨率图像.此外..具有回退选项的低分辨率图像,不确定如何影响单个图像seo排名.
我一直在阅读有关srcset 的内容。
不幸的是它并不与所有浏览器完全兼容。如果浏览器不支持它会发生什么？所有图片都会被下载吗？我可以指定在这种情况下使用什么图像吗？
有人可以向我解释calc(.333 * (100vw - 12em))以下HTML行中的含义吗？特别是.333的价值; 它来自哪里？
sizes="(min-width: 36em) calc(.333 * (100vw - 12em)),
100vw"
摘自http://ericportis.com/posts/2014/srcset-sizes/
长度可以是各种各样的东西!长度可以是绝对的(例如99px,16em)或相对的(33.3vw,如我们的例子中所示).你会注意到,与我们的例子不同,有很多布局结合了绝对和相对单位.这就是令人惊讶的良好支持的calc()函数的用武之地.假设我们在3列布局中添加了12em侧边栏.我们会像这样调整尺寸属性:
sizes="(min-width: 36em) calc(.333 * (100vw - 12em)),
100vw"
我明白这一点:
从这个答案
我知道，如何在React + Webpack中使用常规图像src。
在srcset 2x内有空格的情况下，如何获得相同的结果？
看来我无法从这样的字符串导入：
从'./temp/picture@2x.jpg 2x'导入图片；
它可能由于内部空间而破裂。
我试图寻找一些插件，但这
https://github.com/herrstucki/sensitive-loader
明确指出不支持2x。
和这个
https://www.npmjs.com/package/srcset-loader
根本没有提到2x，所以我猜它也不支持它。
那么，有什么方法可以在这里使用srcset 2x吗？
我的sizes属性一直都有问题.我刚才问过一个问题,你应该宣布哪个订单的尺寸和Yoav说:
"你的尺寸值应该从最窄的断点开始,然后逐渐向更宽的断点移动,所以在你的情况下它应该是(最小宽度:62.5em)25vw,(最小宽度:30em)50vw,100vw.
否则,如果你在视网膜屏幕上,在确定要选择哪个图像时也会考虑屏幕的DPR."
这是有道理的,但在这种情况下会发生什么.假设您在移动设备上有100vw的图像,但容器max-width: 380px上有图像.我会这样做:
sizes="(min-width: 380px) 380px, 100vw"
和我一起到目前为止？凉.在700px时,布局变为两列,因此您希望图像为50vw.所以我会这样做:
sizes"(min-width: 700px) 50vw, (min-width: 380px) 380px, 100vw"
但是,技术上在最小宽度:700px时图像现在小于最小宽度:380px值,因为700/2 = 350px所以现在订单应该是:
sizes"(min-width: 380px) 380px, (min-width: 700px) 50vw, 100vw" ？
然后在1024px处布局变为3列,在1200px处外部容器停止布局不再扩展,所以我想要这样的东西:
sizes"(min-width: 1220px) 380px, (min-width: 1024px) 33vw, (min-width: 700px) 50vw, (min-width: 380px) 380px, 100vw"
它是否正确？
我有以下内容
<img
src="/img/footer/logo_white.png?v=2.0"
srcset="/img/footer/logo_white.png?v=2.0 1x,
/img/footer/logo_white2x.png?v=2.0 2x"
>
这在普通和hiDPI屏幕上工作正常.
但是当视口非常小(低于400px)时,徽标不适合,因此我需要在实际长度方面使用较小版本的图像,这是我创建的.然后我试了一下
<img
class="biw-logo"
sizes="(max-width: 390px) 110px, 175px"
src="/img/footer/biw_logo.png?v=2.0"
srcset="/img/footer/biw_logo_small.png?v=2.0 110w,
/img/footer/biw_logo.png?v=2.0 175w,
/img/footer/biw_logo2x.png?v=2.0 350w"
>
这适用于显示低于390像素的视口的_small图像 - 但现在我已经失去了"高分辨率"因素; 我不能强迫iphone5s中的iOS浏览器使用上述语法显示长度为110px的220px图像.
你能纠正我的语法吗？
<img class="biw-logo" sizes="(max-width: 390px) 110px, 175px" src="http://placehold.it/175x75" srcset="http://placehold.it/110x50 110w,
http://placehold.it/175x75 175w, http://placehold.it/350x150 350w">我正在尝试使响应式图像正常工作，到目前为止我已经有了这个布局......
.container {
display:flex;
max-width:1000px
}
.col1 {
flex:1;
background:teal;
text-align:center;
}
.col2 {
flex:1;
background:wheat;
text-align:center;
}
.img-responsive {
max-width:100%;
height:auto;
}<div class="container">
<div class="col1">
This is column 1
<img
class="img-responsive"
src="https://dummyimage.com/1000x1000/000/fff"
srcset="https://dummyimage.com/1000x1000/000/fff 1000w,
https://dummyimage.com/750x750/000/fff 750w,
https://dummyimage.com/400x400/000/fff 400w"
sizes="(max-width: 1000px) 1000px,
(max-width: 7500px) 750px,
(max-width: 400px) 400px,
1024px"
">
</div>
<div class="col2">
This is column 2
</div>
</div>我期望在屏幕为 1000px 及以上时显示 1000px 图像，在 750px 及以上时显示 750px 版本等等......
但它只给我大版本，我哪里错了？
我一直在研究一个新的响应式网站设计，我有一个画廊，其中包含一个图像网格，当浏览器视口为 768 像素或以上时，跨越 4 列宽（因此每个图像大约占视口的 25%）。任何 767px 或更低的东西都只有 1 列宽（在较低的分辨率下使其全宽）。
每个图像我有三个来源。220 像素、260 像素和 420 像素。
从上面可以看出，尺寸不遵循视口越小图像越小的常规约定，因此我一直在研究和尝试各种选项。
根据建议，我一直在隐身模式下使用谷歌浏览器，并为 Internet Explorer 进行私密浏览，在加载页面之前浏览器视口很小，等等......以确保我所做的任何更改都得到更新。
我所使用的当前代码是我最接近使其工作的代码，它在堆栈溢出时遵循某人的查询（类似于我的）的答案。但是，在尝试实现它时，我似乎仍然无法让浏览器加载正确的图像，它总是加载较大的 420 像素宽图像。
我的代码目前是这样的：
<img sizes="(min-width: 767px) 420px, 100vm"
srcset="images/thumbs/image_420.jpg 420w,
images/thumbs/image_260.jpg 260w,
images/thumbs/image_220.jpg 220w"
src="images/thumbs/image_220.jpg"
alt="example image"
/>我在讨论这个主题时的第二个查询。最好将我的场景中的默认 img src 设置为 260px 图像吗？因为如果 srcset 不被理解，这将涵盖桌面和移动浏览器，并且只有中等大小的视口（460-767px）会受到影响。还是最好将默认图像设置为最小尺寸？
任何建议将不胜感激，谢谢。
- 编辑 -
只是一个快速更新，我以为我昨天已经从逻辑上弄清楚了，但它没有用，所以我不确定我是否仍然理解计算的整个概念。我最近的编辑看起来像这样：
<img sizes="(min-width: 460px) 420px, (min-width: 768px) 220px, 100vm"
srcset="images/thumbs/image_420.jpg …