如何使图像溢出容器宽度而不是在100%高度上扭曲

要使图像溢出容器宽度而不是在100%高度上扭曲，可以使用CSS的object-fit属性。该属性用于指定如何调整图像以适应其容器。

常见的object-fit属性值包括：

1. fill：默认值，图像将拉伸以填充容器，可能会导致图像扭曲。
2. contain：图像将按比例缩放以适应容器，完全显示在容器内，可能会有空白区域。
3. cover：图像将按比例缩放以填充容器，可能会裁剪部分图像。
4. none：图像将保持原始大小，不会调整以适应容器，可能会溢出容器。
5. scale-down：图像将按比例缩小以适应容器，如果图像原始大小小于容器，则保持原始大小。

例如，如果要使图像溢出容器宽度而不扭曲，可以将CSS样式应用于图像的父容器：

.container {
  width: 300px; /* 容器宽度 */
  height: 200px; /* 容器高度 */
  overflow: hidden; /* 隐藏溢出部分 */
}

.image {
  width: 100%; /* 图像宽度占满容器 */
  height: auto; /* 图像高度自适应 */
  object-fit: none; /* 不调整图像大小 */
}

在上述示例中，.container是图像的父容器，.image是图像元素。通过设置.container的宽度和高度，并将溢出部分隐藏，然后使用object-fit: none来保持图像原始大小，就可以实现图像溢出容器宽度而不扭曲的效果。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
• 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 腾讯云内容分发网络（CDN）：https://cloud.tencent.com/product/cdn