如何创建左侧含文本与缩略图轮播、右侧带图片滑块的响应式Hero区域

问题概述 #

需要实现的Hero区域存在两个核心问题：

• 文本、缩略图轮播（carousel）与图片滑块（slider）需具备响应式特性，移动端自动垂直排列，且所有元素高度保持统一（即使图片原始高度不同）
• 滑块（slider）内的文本与图片子div无法按设计要求完成布局

你已尝试的代码 #

HTML代码 #

<div class="container">
    <div class="left-side">
        <div>
            <h2>Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="carousel-container">
            <div class="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item"><img src="../IMAGES/1.jpeg" alt="Thumbnail 1"></div>
                    <div class="carousel-item"><img src="../IMAGES/2.jpg" alt="Thumbnail 2"></div>
                    <div class="carousel-item"><img src="../IMAGES/2.jpg" alt="Thumbnail 2"></div>
                    <div class="carousel-item"><img src="../IMAGES/2.jpg" alt="Thumbnail 2"></div>
                    <!-- Add more carousel items as needed -->
                </div>
            </div>
            <div class="controls">
                <button class="control-btn" onclick="prevSlide()">❮</button>
                <button class="control-btn" onclick="nextSlide()">❯</button>
            </div>
        </div>
    </div>
    <div class="right-side">
        <div class="slider">
            <div class="slide">
                <div class="slide-text">
                    <h3>Title 1</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
                <img src="../IMAGES/1.jpeg" alt="Slide 1">
            </div>
            <!-- Add more slides as needed -->
        </div>
    </div>
</div>

CSS代码 #

.container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 20px;
    background-color: black;
    height: 90vh;
}

.left-side {
    width: 50%;
    flex: 1;
    justify-content: center;
    align-items: center;
}

.left-side h2 {
    text-align: left;
    color: #fff;
    font-size: 4rem;
}
.left-side p{
    text-align: left;
    color: #fff;
    font-size: 1rem;
}

.carousel-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 150px;
    width: 100%;
}

.carousel {
    width: 100%;
}

.carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-item {
    width: 100%;
    margin-right: 20px;
    border: 1px #fff solid;
    height: 110px;
}

.carousel-item img {
    height: 107px;
    width: auto;
}

.controls {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.control-btn {
    cursor: pointer;
    padding: 5px;
    background-color: #333;
    color: #fff;
    border: none;
}

.right-side {
    flex: 1;
    border: 2px solid #eee;
    overflow: hidden;
    position: relative;
    width: 50%;
}

.slider {
    width: 100%;
    display: flex;
}

.slide {
    flex: 1;
    padding: 0;
    width: 100%;
}
.slide-text{
    flex: 1;
    width: 30%;
    justify-content: left;
}
.slide img {
    flex: 1;
    width: 70%;
    height: auto;
}

解决方案 #

1. 响应式布局与高度统一处理 #

• 给容器添加媒体查询，移动端切换为垂直flex布局
• 所有图片使用object-fit: cover固定高度，保证图片不变形且填充容器
• 统一左侧区域与右侧滑块的高度控制，确保Hero整体高度一致

2. 滑块文本与图片布局修正 #

• 给.slide设置display: flex，实现文本与图片横向排列
• 调整.slide-text的flex占比与内边距，优化排版
• 固定滑块图片高度，避免因图片尺寸差异导致布局混乱

修改后的完整CSS代码 #

.container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 20px;
    background-color: black;
    height: 90vh;
    box-sizing: border-box; /* 避免padding撑大容器 */
}

.left-side {
    flex: 1;
    display: flex; /* 开启flex布局，垂直排列内部元素 */
    flex-direction: column;
    justify-content: space-around; /* 均匀分配空间 */
    padding-right: 20px;
}

.left-side h2 {
    text-align: left;
    color: #fff;
    font-size: clamp(2rem, 5vw, 4rem); /* 响应式字体大小 */
    margin: 0;
}
.left-side p{
    text-align: left;
    color: #fff;
    font-size: 1rem;
    margin: 10px 0;
}

.carousel-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 150px;
    width: 100%;
}

.carousel {
    width: 100%;
    overflow: hidden; /* 隐藏超出部分 */
}

.carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-item {
    flex-shrink: 0; /* 禁止缩略图压缩 */
    width: 25%; /* 一行显示4个缩略图 */
    margin-right: 10px;
    border: 1px #fff solid;
    height: 110px;
}

.carousel-item img {
    width: 100%;
    height: 107px;
    object-fit: cover; /* 固定高度，图片不变形 */
}

.controls {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    width: 100%;
}

.control-btn {
    cursor: pointer;
    padding: 5px 15px;
    background-color: #333;
    color: #fff;
    border: none;
}

.right-side {
    flex: 1;
    border: 2px solid #eee;
    overflow: hidden;
    position: relative;
    height: 100%; /* 继承容器高度 */
}

.slider {
    width: 100%;
    height: 100%;
}

.slide {
    display: flex; /* 横向排列文本与图片 */
    height: 100%;
}
.slide-text{
    flex: 0 0 30%; /* 固定占比30% */
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    background-color: rgba(0,0,0,0.5); /* 增加文本可读性 */
}
.slide-text h3 {
    margin: 0 0 10px;
}
.slide-text p {
    margin: 0;
}
.slide img {
    flex: 0 0 70%; /* 固定占比70% */
    width: 100%;
    height: 100%;
    object-fit: cover; /* 固定高度，图片不变形 */
}

/* 移动端响应式处理 */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        height: auto; /* 移动端自动适应高度 */
        padding: 10px;
    }
    .left-side {
        padding-right: 0;
        margin-bottom: 20px;
    }
    .carousel-item {
        width: 50%; /* 移动端一行显示2个缩略图 */
    }
    .slide {
        flex-direction: column; /* 移动端滑块文本与图片垂直排列 */
    }
    .slide-text, .slide img {
        flex: 1;
        width: 100%;
    }
}

补充说明 #

• 使用clamp()实现标题字体的响应式缩放，适配不同屏幕
• object-fit: cover确保所有图片在固定高度内保持比例，避免拉伸或变形
• 媒体查询中调整移动端布局，将横向元素改为垂直排列，提升移动端体验
• 给滑块文本添加半透明背景，增强文本可读性

内容的提问来源于stack exchange，提问作者Diana M.