如何在悬停时水平拉伸图像而不是垂直拉伸图像？

要在悬停时水平拉伸图像而不是垂直拉伸图像，可以使用CSS的object-fit属性和:hover伪类来实现。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal Stretch on Hover</title>
    <style>
        .image-container {
            width: 300px;
            height: 200px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .image-container img {
            width: 100%;
            height: auto;
            object-fit: contain;
            transition: all 0.3s ease;
        }

        .image-container:hover img {
            width: 200%;
            height: auto;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img src="your-image-url.jpg" alt="Your Image">
    </div>
</body>
</html>

解释

HTML结构：
- 使用一个div容器来包裹图像，这样可以更容易地控制图像的布局和样式。
- img标签用于显示图像。

CSS样式：
- .image-container：设置容器的宽度和高度，并使用overflow: hidden来确保图像不会超出容器。
- .image-container img：设置图像的初始宽度为100%，高度自动调整，使用object-fit: contain来确保图像完整显示在容器内，并添加过渡效果以便悬停时平滑过渡。
- .image-container:hover img：在悬停时，将图像的宽度设置为200%，高度自动调整，使用object-fit: cover来确保图像覆盖整个容器，同时保持宽高比。