如何实现图片自适应视口比例居中？求文本添加方案

一、图片溢出与自适应比例修复 #

你的核心问题是.container尺寸设置超出父元素范围，同时图片拉伸导致显示异常，以下是修正后的代码：

修改后的HTML（结构不变） #

<section class="main">
    <div class="main-left">
        <div class="container">
            <img src="assets/images/wine.png">
        </div>
    </div>
    <div class="main-right">
        <div class="container">
            <img src="assets/images/oil.png">
        </div>
    </div>
</section>

修正后的CSS #

.main {
    display: flex;
    background-color: #f1eee9;
    height: 100vh; /* 让主区域占满视口高度，避免高度塌陷 */
    width: 100%;
}

.main-left, .main-right {
    display: flex;
    justify-content: center;
    align-items: center; /* 直接在左右容器内实现居中，简化层级 */
    width: 50%;
}

.main-left {
    background-color: #111;
}

.main-right {
    background-color: #1f1f1f;
}

.container {
    width: 80%; /* 相对于父元素宽度的80%，避免溢出 */
    aspect-ratio: 1 / 1; /* 保持正方形比例，可根据图片实际比例调整，比如4/3 */
}

.container img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保持图片比例完整显示；若需要铺满容器改用cover */
}

关键修改说明 #

• 将.main的height:100%改为100vh，确保主区域占满视口高度
• 删除.main-left/.main-right冗余的flex-direction: row，直接在这两个容器内设置居中逻辑
• .container改用百分比宽度替代vw单位，避免超出父元素范围；用aspect-ratio实现自适应比例，无需固定高度
• 图片添加object-fit属性，保证比例不被拉伸

二、文本添加实现建议 #

可以在.container内叠加文本层，通过绝对定位实现图片上的文字效果，示例如下：

修改后的HTML #

<section class="main">
    <div class="main-left">
        <div class="container">
            <img src="assets/images/wine.png">
            <div class="text-content">
                <h2>红酒系列</h2>
                <p>精选优质葡萄，传统工艺酿造</p>
                <button>了解更多</button>
            </div>
        </div>
    </div>
    <div class="main-right">
        <div class="container">
            <img src="assets/images/oil.png">
            <div class="text-content">
                <h2>橄榄油系列</h2>
                <p>冷榨工艺，保留原生营养</p>
                <button>了解更多</button>
            </div>
        </div>
    </div>
</section>

新增的CSS样式 #

.container {
    position: relative; /* 为文本绝对定位提供参考 */
    width: 80%;
    aspect-ratio: 1 / 1;
}

.text-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #fff;
    text-shadow: 0 0 5px rgba(0,0,0,0.8); /* 提升文字在图片上的可读性 */
}

.text-content h2 {
    font-size: 1.5rem;
    margin: 0 0 10px;
}

.text-content p {
    font-size: 1rem;
    margin: 0 0 15px;
}

.text-content button {
    padding: 8px 16px;
    background-color: rgba(255,255,255,0.2);
    border: 1px solid #fff;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
}

.text-content button:hover {
    background-color: rgba(255,255,255,0.4);
}

实现说明 #

• 给.container设置position: relative，让文本层可以基于容器定位
• 文本层用position: absolute固定在图片指定位置（示例为左下角），可根据需求调整top/right/bottom/left值
• 通过文字阴影和半透明按钮优化可读性，样式可根据设计需求自定义

内容的提问来源于stack exchange，提问作者hzero