在网页设计或文档排版中，常常会遇到需要展示多个二维码图片的情况，而这些二维码由于生成来源等因素，大小不一，影响了整体的视觉效果。那么，如何使用 CSS 调整大小不同的二维码图片至视觉效果相同呢？

要理解 CSS 中控制图片大小的基本属性。width 和 height 属性可以直接设置图片的宽度和高度值。例如，若想将一张二维码图片宽度设为 200px，高度设为 200px，可以这样写代码：

img {
    width: 200px;
    height: 200px;
}

然而，直接这样设置可能会导致图片变形，尤其是当原图片的宽高比与设置值不一致时。对于二维码图片，变形可能会影响其扫码功能。为了避免这种情况，可以使用 max-width 和 max-height 属性。这两个属性会将图片的宽度和高度限制在设定值以内，保持图片原有的宽高比。比如：

img {
    max-width: 200px;
    max-height: 200px;
}

这样，图片会根据自身的宽高比自适应调整大小，确保不会变形，同时又能将大小限制在合适的范围内。

另外，还可以利用 CSS 的 object-fit 属性。该属性有多个值，其中 cover 值能让图片完全覆盖设定的区域，并且保持宽高比。如果想让不同大小的二维码图片在一个 200px×200px 的区域内呈现出视觉效果相同的样子，可以这样写：

img {
    width: 200px;
    height: 200px;
    object-fit: cover;
}

通过这种方式，图片会自动缩放以填满指定区域，多余的部分会被裁剪掉，但整体的视觉效果会保持一致。

对于不同分辨率的屏幕，还需要考虑响应式设计。可以使用媒体查询，根据屏幕宽度调整二维码图片的大小。例如：

@media (max-width: 600px) {
    img {
        max-width: 150px;
        max-height: 150px;
    }
}

这样在小屏幕设备上，二维码图片会相应缩小，以适应屏幕空间，同时依然保持良好的视觉效果。通过这些 CSS 技巧，就能轻松调整大小不同的二维码图片，使其在页面上呈现出视觉效果相同的展示。