gpt4 book ai didi

html - 具有高性能的响应图像

转载 作者:行者123 更新时间:2023-11-27 23:54:50 26 4
gpt4 key购买 nike

我正在制作一个新的网站,我想将其配置为在移动版本中加载不同的图像。

我看到了一些可以满足我需求的解决方案。我的问题是什么是高性能的最佳解决方案。有什么解决方案可以防止资源管理器加载不必要的内容。

一种方法是使用 html5 的元素:

<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers">
</picture>

另一种方法是使用 css 显示属性:

.img-responsive.mobile {
display: none;
}

@media only screen and (max-device-width: 480px) {
.img-responsive {
display: none;
}
.img-responsive.mobile {
display: block;
}
}
<body>
<img src="img_flowers.jpg" class="img-responsive careerpage">
<img src="img_smallflower.jpg" class="img-responsive careerpage mobile"> </body>

我不知道任何其他方法。我想知道什么是高性能的最佳选择谢谢

最佳答案

您需要做的就是为 img-responsive 类设置一些 CSS 属性,例如:

.img-responsive {
width: 100%;
max-width: 400px;
height: auto;
}

关于html - 具有高性能的响应图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56314328/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com