Question

有没有办法在srcset / sizes属性中将图像的大小设置为其父元素的百分比？我只看到了将大小设置为视口的绝对值或百分比的方法。

如果以上是不可能的，并且我们使用相对img宽度，例如网格，是否有一种方法（在CSS和/或HTML中）告诉浏览器根据设备大小下载不同的img分辨率？

感谢。

Answer 1

如果您将图像宽度设为百分比，它会将图像缩小到我认为的父元素的宽度。

height: auto;
width: 40%;

如果要使用不同的分辨率，可以使用@ media规则。设置图像应该去的空div。然后使用@ media规则在CSS中更改不同屏幕宽度的背景图像。

在您应该使用图片的html中：

<div class="yourclass"></div>

在你的css文件中：

  @media screen and (min-width: 630px) {
     .yourclass {
     background-image: url("yourpciture.png");
    }
    }

如果您为每个分辨率更改创建其中一个，您希望当有人拖动窗口或更换设备时图像会发生变化。只需记住它的最小宽度，将其称为最小屏幕尺寸为最大，否则您的更改将被覆盖。