パーセンテージで幅または高さのみを指定すると、画像が正しい比率を維持できることはわかっていますが、次のようなことを試してみると次のようになります。
img {width: calc(100% - 60px);}
割合を失います。画像が60px狭くなります。次に、これを試しました：
img {width: calc(100% - 60px); height: calc(100% - 60px);}
..しかし、画像はまだ正しい比率を保持していません。
正しい比率を維持しながら計算ユニットを使用するために、CSS、またはおそらくいくつかの軽い js を使用する方法を知っている人はいますか?
最終的な目標は、大きな (各ページのコンテンツの大部分を含む) div 内のすべての画像に css を割り当てて、オーバーフローして水平スクロールを引き起こすことなく、モバイル デバイス (具体的には iPhone の縦向き) 内に収まるように画像サイズを縮小することです。または、幅が 100% のその他の要素 (バナーなど、ページをまたがるため) は、ページ全体の幅に満たない場合があります。
デバイスの幅に固有のメディア クエリを使用して、すべての画像に最大の px 幅を与えるために、余白の合計 % パディングを追加するとうまくいくと思いますが、他に何もない場合は、計算値を使用したいと思います。私はそれらを使用することができません。
codepen へのリンクは次のとおりです: https://codepen.io/spicedham/pen/qMKLYq 追加情報: data-height および data-width 属性にアクセスできますが、イメージをコンテナーにラップできません。