Question

我一直在寻找答案。我更喜欢只使用CSS的解决方案，但我一直找不到。

我有一个固定宽度的弹出窗口，如果内容较大，它会增加高度。在里面，我放了一个图像，它应该占用弹出窗口的一半，同时保持纵横比，尽可能大而不离开屏幕，并设置一个div来保存图像的信息，也应该是屏幕的一半，这样图像和div是并排的。示例：https://codepen.io/Smarticles101/pen/WdmZLx

我可以在90vh的图像上设置一个高度，使其更大，最大宽度为50%，以确保它只占弹出窗口的一半。但是，如果窗口宽度缩小或者弹出窗口的固定宽度较小，则图像将保持高度和最大宽度，从而不保持纵横比。

如何在宽度缩小时使图像保持纵横比？

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%;
  background-color: blue;
}

img {
  height: 90vh;

  max-width: 50%;
  /*
    The image will not maintain aspect ratio if the max-width is reached, it will maintain height as whatever it was set to originally rather than     shrink in height.
  */

  display: inline-block;
}

#sidedata {
  max-width: 50%;
  display: inline-block;
}

Answer 1

简短的回答，希望有所帮助，尝试使用max-height：

img {
  max-height: 90vh;
  max-width: 50%;
  display: inline-block;
}

图像调整大小，符合最大宽度但更改高度以保持纵横比

1 个答案: