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

Question

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

我为包含这些元素的两个 div 设置了特定的尺寸，然后将 img 的宽度和高度设置为 100%（如 here 所述）。不幸的是，即使我使用所提供的实际图像的尺寸，这也会导致图像失真。顺便忘了说我用的是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

将图像width 设置为100% 并将height 设置为auto。这样，图像将在调整大小的同时保持其纵横比。