javascript - ap を別の div に配置された画像と同じ幅/高さにする

Question

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>

Answer 1

画像widthを100%とheightに設定しautoます。こうすることで、サイズ変更中も画像の縦横比が維持されます。