javascript - 使 p 与放置在另一个 div 中的图像具有相同的宽度/高度

Question

我试图让 p 始终与放置在它旁边的图像具有相同的宽度和高度。

我为包含这些元素的两个 div 设置特定尺寸，然后将 img 宽度和高度设置为 100%(如前所述 here )。不幸的是，即使我使用所提供的实际图像的尺寸，这也会导致图像失真。忘了说了，我用的是 Picturefill，可能跟那个有关系..

我应该提一下，通过调整 picturefill HTML 的 sizes 属性中的值，可以在某种程度上控制失真量。然而事实证明，我必须向该属性添加数千个不同的值才能真正使其以这种方式工作。只是感觉这不是处理此类问题的正确方法。

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>

Answer 1

将图像宽度设置为100%，将高度设置为自动。这样，图像将在调整大小时保持其纵横比。