容器高宽比100%时图像宽高比失真

是指当一个图像被放置在一个容器中，并且容器的高宽比为100%时，图像的宽高比会发生变形，导致图像显示不正常。

这种失真通常发生在响应式网页设计中，当网页布局需要适应不同屏幕尺寸和设备时，容器的高宽比可能会发生变化。如果图像的宽高比与容器的高宽比不匹配，图像就会被拉伸或压缩，导致图像变形或失真。

为了解决这个问题，可以采取以下几种方法：

1. 保持图像的原始宽高比：在容器中设置图像的最大宽度或最大高度，并使用CSS属性max-width或max-height来限制图像的尺寸。这样可以确保图像在容器中保持原始的宽高比，但可能会导致图像在某些情况下显示不完整。
2. 使用背景图像：将图像作为容器的背景图像，并使用CSS属性background-size来控制图像的尺寸。通过设置background-size为cover或contain，可以确保图像在容器中适应并保持宽高比，但可能会导致图像被裁剪或留有空白区域。
3. 使用媒体查询：通过使用CSS的媒体查询，可以根据不同的屏幕尺寸和设备，为容器设置不同的高宽比。这样可以根据不同的情况，选择合适的图像尺寸或调整图像的宽高比，以确保图像在不同设备上显示正常。

腾讯云相关产品中，可以使用腾讯云的图片处理服务（图片处理-高级图像处理）来对图像进行裁剪、缩放、旋转等操作，以适应不同的容器高宽比。具体产品介绍和使用方法可以参考腾讯云官方文档：图片处理。