如何调整picture元素高度以适配响应式容器？

当前场景下，.main-content容器中的picture宽度已适配，但高度无法随容器响应式变化。尝试给.main-content设置height: auto，并给img和picture添加max-height: 100%后，picture高度能适配容器，但img仍无效果。

问题原因 #

picture作为img的父容器，仅设置max-height:100%只能限制自身高度，但img默认会保持自身宽高比，若没有明确的高度约束，不会自动继承父容器的高度限制。

解决方案 #

通过以下CSS调整，让img完全响应picture及.main-content的高度变化：

1. 给.main-content添加明确高度上下文，继承父元素main的高度
2. 给picture设置高度约束，同时利用flex属性分配布局空间
3. 给img设置高度填充规则，同时保持原有宽高比

修改后的完整代码 #

CSS代码

:root{
    --clr-neutral-900: hsl(0, 0%, 8%);
    --clr-neutral-400:hsl(0, 0%, 41%);
    --clr-neutral-100:hsl(0, 0%, 98%);

    --ff-primary:'Epilogue', sans-serif;
    --ff-body: var(--ff-primary);
    --ff-heading: var(--ff-primary);

    --fw-regular:700;
    --fw-bold:500;
}

/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
  box-sizing: border-box;
}
/*
  2. Remove default margin
*/
* {
  margin: 0;
  padding: 0;
}
/*
  3. Allow percentage-based heights in the application
*/
html, body {
  height: 100%;
}
/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
  6. Improve media defaults
*/
img, picture, video, canvas, svg {
  max-width: 100%;
  display: block;
}
/*
  7. Remove built-in form typography styles
*/
input, button, textarea, select {
  font: inherit;
}
/*
  8. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
ul{
    list-style: none;
    display: flex;
    gap:2rem; 
}
nav{
    width:70%;
}

.login-buttons{
    display: flex;
    gap:2rem;
}
.container{
    display: flex;
    justify-content: space-between;
    margin: 1.5rem;
    align-items: center;
}
main{
    height: 95vh;
}
header{
    height: 5vh;
}
main{
    display: flex;
}

.main-content{
    margin: 4rem;
    width:100%;
    border: solid black;
    display: flex;
    padding: 1rem;
    align-items: center;
    height: 100%; /* 新增：继承main的高度 */
    gap: 2rem; /* 可选：给文本和图片添加间距 */
}

/* 新增：约束picture的高度 */
.main-content picture {
    height: 100%;
    max-height: 100%;
    flex: 1; /* 让picture在flex布局中合理分配空间 */
}

/* 新增：让img适配picture容器 */
.main-content picture img {
    height: 100%;
    width: 100%;
    object-fit: contain; /* 保持图片比例，避免拉伸变形 */
}

HTML代码（无需修改）

<main>
  <section class="main-content">
<div class="text">
  <h1>Make remote work</h1>
  <p>Get your team in sync, no matter your location.Streamline processes, create team rituals, and watch productivity soar. </p>
  <button>Learn more</button>
</div>
<picture>
  <source srcset="images/image-hero-desktop.png" media="(min-width:600px)">
  <img src="images/image-hero-mobile.png">
</picture>
  </section>
</main>

关键修改说明 #

• .main-content添加height:100%：让容器拥有明确的高度参考值，为子元素提供高度上下文
• picture设置height:100%和flex:1：确保它填满.main-content的可用高度，同时在flex布局中与文本区域平衡分配空间
• img设置height:100%+object-fit:contain：强制图片高度匹配父容器，同时保持原有宽高比，避免图片变形

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