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

I am trying to make a p always have the same width and height as an image that is placed next to it.

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

I set specific dimensions to both of the divs containing those elements, and then set the img width and height to 100% (as mentioned here). Unfortunately that led to images getting distorted even if I used the dimensions of the actual images being provided. Forgot to mention that I use Picturefill by the way, perhaps it has something to do with that..

我为包含这些元素的两个div设置了特定尺寸,然后将img宽度和高度设置为100%(如此处所述)。不幸的是,即使我使用了提供的实际图像的尺寸,也会导致图像变形。忘了提到我顺便使用Picturefill,也许它与它有关...

I should mention that it is possible to somewhat control the amount of distortion, by adjusting the values in the sizes attribute of the picturefill HTML. However it turned out that I would have to add thousands of different values to that attribute to actually make it work this way. It just didn't really feel like the correct approach to something like this.

我应该提一下,通过调整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>

1 个解决方案

#1

Set the image width to 100% and height to auto. That way, the image will preserve its aspect ratio while still being resized.

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