我们如何在HTML5中使用图片标签有效地缩放图像？在缩放图像时,显示在媒体查询中给出的图像而不是srcset内的图像,这些图像与设备像素比率一起给出.
这是我提到的网站之一:https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/
请找到我使用的以下代码.
<picture>
<source media="(min-width: 767px)" srcset="../images/kitten-large.png 1x, ../images/kitten-medium.png 2x, ../images/kitten-small.png 3x">
<source media="(min-width: 480px)" srcset="../images/gallery-img-3.jpg">
<img src="../images/kitten-large.png" >
</picture>
最初,当我的网站加载时,一些图像被切掉,几秒后重新出现.但一旦滚动,问题就会重新出现.它仅出现在最新版本的Firefox中.它在Firefox 44版本中很好用,但我在49和52中遇到了问题.
HTML结构如下.
<div style="transform: translate(0px, 0px); position: absolute; left: 0px; top: 0px;">
<div class="whitecontent" style=" position: relative;">
<p class="blockelemimage" style="position: absolute; top: -64px;">
<img alt="Client Logo" src="">
</p>
</div>
</div>