我试图使 ap 始终具有与放置在它旁边的图像相同的宽度和高度。
我为包含这些元素的两个 div 设置了特定尺寸,然后将 img 宽度和高度设置为 100%(如此处所述)。不幸的是,即使我使用所提供的实际图像的尺寸,这也会导致图像失真。顺便提一下我用的是Picturefill,可能跟这个有关吧。。
我应该提到,通过调整图片填充 HTML 的 size 属性中的值,可以在一定程度上控制失真量。然而事实证明,我必须向该属性添加数千个不同的值才能使其真正以这种方式工作。只是感觉这不是处理此类事情的正确方法。
HTML
<div>
<img
sizes="(min-width: ...px) ...vw, (min-width: ...px) ...vw etc"
srcset="/images/img1.jpg 280w,
/images/img2.jpg 350w"
alt="...">
</div>
<div>
<p> ... </p>
</div>