如何調整嵌入式圖像的大小，例如產品說明中的屏幕截圖

Question

我正在設計一個銷售應用程序的網站。 每個產品頁面均包含帶有屏幕截圖的文本。 我無法控制圖像的大小和行為。 每個屏幕截圖都具有不同的大小和形狀-有些高而窄，而有些又短又寬。

我的問題：
我應該如何控制這些圖像的大小？ 有些100％完美，但另一些100％則太大。 因此，如果我在css中設置一個值，則對圖像1,3,6,9沒問題，但對於圖像2,4,6,8則不行（而且麻煩的是有兩種以上的大小類型...）。 我嘗試使用最大寬度，但是顯然失敗了，因為如果一張圖片超過最大寬度，它將被縮小，而另一張則不會-這會產生一個有趣的頁面！
在這種情況下，我應該為每個圖像進行局部樣式設置嗎？
如果答案是這里需要本地樣式，是否意味着每個頁面還需要它自己的媒體查詢來相應地調整大小？

謝謝。

Answer 1

您可以創建5個CSS類，命名為.width1至.width5，其寬度值從20％到100％。

添加新圖像時，請選擇適合您需要的類別。

如果需要更高的精度，請創建一組10類而不是5類！ 編輯：按照承諾，代碼：

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