实现60%/40%宽度等高图文并排布局，解决图片裁切及响应式问题

问题出在你给图片设置的object-fit: cover属性上——这个属性会强制图片按比例填满容器，超出容器的部分会被自动裁切，这就是你看到图片上下被切掉的原因。下面是针对性的修复方案，同时完善响应式特性：

修复后的完整代码 #

CSS 代码 #

#hero-section{
    width: 100%;
    height: 90vh;
    margin-top: 10px;
    display: flex;
    flex-wrap: nowrap;
}

#image-div{
    width: 60%;
    border: solid black 2px;
    /* 让图片在容器内居中显示 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#hero-image{
    width: 100%;
    height: 100%;
    /* 替换cover为contain，保证图片完整显示，按比例适配容器 */
    object-fit: contain;
    /* 可选：若不想留空白，可改用scale-down，优先适配容器大小 */
    /* object-fit: scale-down; */
}

#hero-text{
    width: 40%;
    border: solid black 2px;
    padding: 1rem;
    box-sizing: border-box;
}

/* 响应式适配：小屏幕下改为垂直布局 */
@media (max-width: 768px) {
    #hero-section{
        flex-direction: column;
        height: auto;
    }
    #image-div, #hero-text{
        width: 100%;
        height: 50vh;
    }
}

HTML 代码（仅补充图片alt文本，其余不变） #

<body>
    <div id="hero-section">
        <div id="image-div">
            <img id="hero-image" src="ai-generated-8048681_1920.png" alt="AI生成的展示图片">
        </div>
        <div id="hero-text">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quibusdam laboriosam ipsum alias, aliquam voluptatum in earum minus possimus eius commodi nobis natus saepe maiores nesciunt reprehenderit eligendi sequi? Velit?</p>
        </div>
    </div>
</body>

关键修改说明 #

1. object-fit: contain：替换原来的cover，让图片完整显示，自动按比例缩放至容器的最大可用空间，不会裁切任何部分（容器可能出现留白，但图片完整性得到保证）。
2. 图片容器居中布局：给#image-div添加flex布局属性，让图片在容器内水平垂直居中，避免图片偏位。
3. 响应式优化：通过媒体查询，在小屏幕（768px以下）将布局改为垂直排列，同时调整宽度和高度，保证移动端的浏览体验。

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