インラインイメージのサイズ設定方法商品説明のスクリーンショット

Question

私はアプリを販売するサイトをデザインしています。各製品ページにはスクリーンショット付きのテキストが含まれています。私は画像のサイズと動作を制御するのに問題があります。 それぞれのスクリーンショットはサイズと形状が異なります。一部は背が高く、狭く、その他は短くて幅が広いです。

私の質問：私はこれらの画像のサイズを制御することになっていますどのように
？ 100％で完璧なものもあれば、100％で大きすぎるものもあります。だから私はCSSで値を設定した場合、画像1,3,6,9ではOKですが、画像2,4,6,8では表示されません（そしてobvioulsyには2種類以上のサイズがあります...）。 max-widthを使用しようとしましたが、1つの画像が最大幅を超えると縮小され、別の画像は縮小されないので、明らかに失敗しました。
このような場合、各画像のローカルスタイリングが必要ですか？
ここでローカルスタイリングが必要だと答えた場合は、レスポンシブに応じて各ページに独自のメディアクエリが必要であることを意味しますか？

ありがとうございました。

Answer 1

20％から100％までの幅の値を持つ.width1〜.width5という5つのCSSクラスを作成できます。

新しい画像を追加するときは、必要に応じてクラスを選択します。

さらに精度が必要な場合は、5ではなく10個のクラスを作成します。 編集：約束として、コード：

.size1{width:10%;} 
.size2{width:20%;} 
.size3{width:30%;} 
.size4{width:40%;} 
.size5{width:50%;} 
.size6{width:60%;} 
.size7{width:70%;} 
.size8{width:80%;} 
.size9{width:90%;} 
.size10{width:100%;} 

ように画像：

<img class="size2" src="..." /> 

が20％広いであろう。