容器对齐异常、图片显示错误，无法还原Canva网页设计求助

问题核心 #

你要实现左右分栏的布局（图片占50%宽度，文字在右侧垂直居中），但当前代码里绝对定位的文本脱离了flex布局流，导致文字覆盖图片，同时图片因未设置宽高，object-fit属性无法生效。

代码问题点 #

1. .about-us-text用了绝对定位，脱离flex布局，导致和图片重叠
2. background-color: none是无效CSS值，正确写法是transparent
3. .about-image未设置宽高，object-fit无法发挥作用
4. HTML里存在<h2>标签嵌套错误

修复后的代码 #

CSS

.about-us-image {
    width: 50%;
    background-color: transparent; /* 替换无效的none */
}

.about-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例并填满容器，比contain更适配分栏布局 */
}

.about-us-text {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    text-align: left;
}

HTML

<div style="display: flex; align-items: stretch;">
    <div class="about-us-image">
        <img class="about-image"
             src="file:///C:/xampp/htdocs/templatemo_591_villa_agency/assets/images/smiling-handsome-asian-manager-with-modern-device.jpg"
             alt="smiling-handsome-asian-manager-with-modern-device">
    </div>
    <div class="about-us-text">
        <h2 style="color: #56aeff;">Who We Are</h2>
        <p>With more than a decade of experience, we are a trusted team of business and financial planners to help you start your business or retirement in Bali, Indonesia and other islands</p>
    </div>
</div>

修复说明 #

• 去掉.about-us-text的绝对定位，改用flex布局的justify-content: center实现垂直居中，让文字在右侧50%宽度的区域内正常排列
• 给图片设置100%宽高，配合object-fit: cover保证图片填满容器且比例不变
• 修复HTML里的<h2>嵌套错误，删除多余标签
• 外层flex容器添加align-items: stretch，确保左右两栏高度完全一致
• 替换无效的background-color: none为transparent，如果不需要背景色也可直接删除该属性

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