如何在图像上使用 resize 属性？

【问题标题】：How can I use resize property on images?如何在图像上使用 resize 属性？
【发布时间】：2021-09-24 16:52:49
【问题描述】：

我发现在图像上使用调整大小的一种方法是放置一些元素，例如 div 或其他东西，然后通过 CSS 将图像作为背景图像。我无法让图像始终以 100% 的速度出现。这样做的正确方法是什么？

【问题讨论】：

【解决方案1】：

使用resize-属性。请注意，它不适用于内联元素或带有overflow="visisble"的元素

div {
  display: block;
  resize: horizontal;;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-width: 100%;
}

img {
  width: 100%;
}

<div>
<img src="https://via.placeholder.com/160x90.jpg">
</div>

【讨论】：