如何调整嵌入式图像的大小，例如产品说明中的屏幕截图

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