纯CSS实现弹窗内图片保持宽高比且占半宽的技术求助

我完全理解你的需求：固定最大宽度的弹窗，内部图片与信息区各占弹窗宽度的一半，图片要保持原有宽高比，同时尽可能大但不超出屏幕范围。之前用height:90vh的问题在于，固定高度会限制图片的自适应调整，导致宽度收缩时高度无法同步变化，直接破坏了宽高比。

下面是纯CSS的解决方案，用Flex布局实现稳定的并排效果，同时让图片完美维持比例：

修改后的完整代码 #

HTML（保留你原有的结构） #

<div id="popup">
  <img src="https://images.freeimages.com/images/large-previews/12d/frangipani-02-1311438.jpg" alt="image" />
  <div id="sidedata">
    <h1>Image</h1>
    <p>Some data about the image here</p>
  </div>
</div>
<br />
<div id="popup">
  <img src="https://www.w3schools.com/images/w3schools_green.jpg" />
</div>

CSS #

#popup {
  max-width: 50%; /* 弹窗的固定最大宽度，若要严格固定宽度可改为width:50% */
  background-color: blue;
  display: flex; /* 用Flex实现图片与信息区的并排布局 */
  align-items: flex-start; /* 顶部对齐，避免内容拉伸图片高度 */
}

img {
  max-width: 50%; /* 图片占弹窗宽度的一半 */
  max-height: 90vh; /* 图片最大高度不超过屏幕的90% */
  width: auto; /* 宽度自动适配，维持宽高比 */
  height: auto; /* 高度自动适配，维持宽高比 */
  object-fit: contain; /* 确保图片完整显示，不会被裁剪或拉伸 */
}

#sidedata {
  width: 50%; /* 信息区占弹窗宽度的一半 */
  padding: 0 15px; /* 可选：添加内边距优化内容显示 */
  box-sizing: border-box; /* 内边距不会超出宽度限制 */
}

/* 适配只有图片的弹窗场景 */
#popup:has(> img:only-child) {
  justify-content: center; /* 图片居中显示 */
}
#popup:has(> img:only-child) img {
  max-width: 100%; /* 单图片时占满弹窗宽度 */
}

关键改进点说明 #

• Flex布局替代inline-block：Flex布局能更稳定地实现并排效果，避免inline-block带来的对齐、间距等问题，让图片和信息区始终保持各占一半宽度。
• 动态尺寸控制：去掉固定的height属性，改用max-height:90vh和max-width:50%结合width:auto/height:auto，让图片根据自身宽高比自动调整尺寸，无论窗口宽度如何变化，都能维持比例。
• 图片完整显示：object-fit:contain确保图片在尺寸限制内完整展示，不会出现拉伸或裁剪的情况。
• 单图片弹窗适配：用:has()选择器（现代浏览器支持）处理只有图片的弹窗，让图片自动占满弹窗宽度同时保持比例；若需兼容旧浏览器，可给单图片弹窗手动添加类名来实现相同效果。

这样调整后，无论是窗口宽度缩小，还是弹窗内容变化，图片都能始终满足你的布局要求。

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