如何让图像延伸，同时控制其宽度并在颤动中为其提供边界半径

要实现图像延伸并控制其宽度，同时在颤动中为其提供边界半径，你可以使用CSS来完成这个任务。以下是一个基本的示例，展示了如何实现这一效果：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Stretch and Shake</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="image-container">
        <img src="your-image.jpg" alt="Stretched Image" class="stretched-image">
    </div>
</body>
</html>

CSS部分（styles.css）

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.image-container {
    position: relative;
    width: 80%; /* 控制容器宽度 */
    padding-bottom: 80%; /* 保持宽高比 */
    overflow: hidden;
}

.stretched-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图像比例并填充容器 */
    border-radius: 20px; /* 设置边界半径 */
    animation: shake 2s infinite; /* 应用颤动动画 */
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

解释

HTML部分：创建一个包含图像的容器。
CSS部分：
- .image-container：设置容器的宽度和高度比例，使用padding-bottom来保持宽高比，并设置overflow: hidden以防止图像溢出。
- .stretched-image：使用object-fit: cover来保持图像比例并填充容器，设置border-radius来添加边界半径，并应用颤动动画。
- @keyframes shake：定义颤动动画的关键帧。