html - HTML 和 CSS 中的响应式图像

Question

使用 css 创建响应图像的最佳方法是什么，我基本上是在尝试在屏幕为(最大宽度:480 像素)时切换标题图像，这是我的代码

<div id="header">
<img src="images/H550xW1250.png" alt="img" width="100%" class="size1280"/>
<img src="images/H683xW480.png" alt="img" width="100%" class="size480"/>
</div>

<style>
@media only screen and (max-width: 480px) {
.size1280 {
    display: none !important;
}
.size480 {
    display: block !important;
}
}
<style/>

Answer 1

使用图片标签怎么样？我认为这会容易得多。像这样

<picture>
   <source media="(min-width: 480px)" srcset="imgsrc">
   <img src="imgsrc">
</picture>