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

Question

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

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..

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.

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

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