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

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

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

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

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

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

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

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

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