Question

我正在尝试使响应式图像正常工作，到目前为止，我已经有了这种布局...

.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等...

但是它只会给我大版本，我在哪里出错？

Answer 1

发生这种情况的原因有很多：

您的浏览器可能已经缓存了较大版本的图像，因此使用它比通过网络来获得新副本的效率更高。
设备像素比率> 1.0，导致浏览器请求的分辨率高于预期的版本
图像的显示宽度大于srcset中的下一个最小图像。

仔细检查，您的示例发生了一些奇怪的事情。

您正在使用sizes，就好像它是对该元素的媒体查询一样；这些最小/最大宽度媒体查询的工作原理与其他地方相同，也就是说，它们适用于视口的大小，而不是元素的大小。默认值为100vw，即视口的宽度。您可能需要使用类似50vw之类的东西。
sizes按顺序求值；将使用第一个匹配项。在您的情况下，该值为(max-width: 1000px)，对于小于等于1000像素的视口将适用。这意味着您要让浏览器加载建议的最大图像。
使用max-width代替min-width有点不寻常，尤其是在最大宽度和请求的图像尺寸之间为1：1比例的情况下。您通常会看到类似(min-width: 768px) 600px, 100vw的内容，如果视口的宽度大于768px（我们的示例移动堆栈断点），则告诉浏览器以600px的显示尺寸加载图像，否则加载一个以显示在视口的整个宽度（即100vw后备）。
最后，在"标记的右括号之前，您还有一个双引号（img），尽管我不知道它是否会影响您的示例。

Answer 2

尝试使用图片标签代替img标签。将来源表格的尺寸最大到最小，并在末尾带有默认的img标签。

赞：

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

自适应图像srcset-始终选择最大的图像

2 个答案: