使用 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/>
最佳答案
使用图片标签怎么样?我认为这会容易得多。像这样
<picture>
<source media="(min-width: 480px)" srcset="imgsrc">
<img src="imgsrc">
</picture>
关于html - HTML 和 CSS 中的响应式图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45512766/