使用CSS控制图片显示比例可以通过多种方法实现，包括使用width和height属性、object-fit属性、background-size属性以及transform属性等。下面将详细介绍这些方法，并提供示例代码。
width和height属性通过设置图片的宽度和高度，可以控制图片的显示比例。将宽度设置为100%会使图片宽度与父容器相同，而高度可以设置为固定值或百分比。
img {
width: 100%;
height: auto; /* 保持图片的原始宽高比 */
}
object-fit属性object-fit属性用于指定如何调整替换元素（如<img>或<video>）的内容大小以适应其容器。它可以接受以下值：
fill：填充容器，可能会扭曲图片。contain：保持图片的宽高比，确保图片完全显示在容器内。cover：保持图片的宽高比，使图片完全覆盖容器，可能会裁剪部分图片。none：不进行缩放，元素按原始大小显示。scale-down：选择none或contain中较小的一个。img {
width: 100%;
height: 300px;
object-fit: cover;
}
background-size属性如果图片被设置为背景图，可以使用background-size属性控制图片的显示比例。cover和contain值同样适用。
div {
width: 200px;
height: 200px;
background-image: url('image.jpg');
background-size: cover;
}
transform属性transform属性可以用来缩放图片。通过结合width和height属性，并使用transform: scale()，可以精确控制图片的显示比例。
img {
width: 300px;
height: 200px;
transform: scale(0.5); /* 缩小50% */
transform-origin: center; /* 缩放中心点在图片中心 */
}
通过这些方法，可以根据具体需求选择合适的方式来控制图片的显示比例。每种方法都有其适用场景，可以根据实际情况灵活运用。