如何将 img 大小设置为大小属性中父元素的百分比

Question

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

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

谢谢。

Answer 1

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

height: auto;
width: 40%;

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

在 html 中，图像应该放在哪里：

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

在您的 css 文档中：

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

如果您为每个分辨率更改创建其中一个，您希望当有人拖动他们的窗口或您更改设备时，图像将更改。请记住，它是最小宽度，因此将它们称为最小屏幕尺寸到最大屏幕尺寸，否则您的更改将被覆盖。