如何调整内联图像的大小产品描述中的屏幕截图

Question

我正在设计一个销售应用程序的网站。每个产品页面都包含带有屏幕截图的文本。我无法控制图像的大小和行为。 每个屏幕截图的大小和形状都不同 - 有些又高又窄，而另一些又短又宽。

我的问题：
我应该如何控制这些图像的大小？有些在 100% 时是完美的，但有些在 100% 时就太大了。因此，如果我在 css 中设置一个值，则图像 1、3、6、9 可以，但图像 2、4、6、8 则不行（并且显然有超过 2 种类型的尺寸......）。 我尝试使用最大宽度，但这显然失败了，因为如果一张图片超过最大宽度，它将按比例缩小，而另一张则不会 - 这会产生一个看起来很有趣的页面！
在这种情况下，我是否应该为每张图片进行本地样式设置？
如果答案是这里需要本地样式，这是否意味着每个页面也需要它自己的媒体查询来响应调整大小？

谢谢。

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% 宽。