jquery - アスペクト比を変更しながらパーセント値で画像のサイズを変更する

Question

さまざまな解像度に適応するように、パーセンテージ値のみを使用してミニ ページをデザインしたいと考えています。私の問題は、すべての「img」タグの CSS 値「height」と「width」でパーセンテージ値を使用すると、適切にスケーリングされますが、アスペクト比は静的なままで、次のような結果になることです: DEMO

私の質問は、アスペクト比を 1:1 にする方法です。

これが私のコードです：

img {

width: 20%; height:20%;
margin: 2% 2% 2% 2%;
padding: 0 0 0 0;
border: 2px solid #666;
opacity:0.5;
float:left;
}

Answer 1

そのためには、すべての画像を同じ px 値にする必要があります。これにより、必要な縦横比でサイズを変更したときに縦横比が維持されます。たとえば、画像の元のサイズが 1000 x 1000 px の場合、%age でサイズを変更すると、幅と高さが等しいため、幅と高さが正方形に従ってスケーリングされます。一貫した側面が必要な場合は、すべてが均一なピクセル値を持つ必要があります。