图像调整大小，符合最大宽度但更改高度以保持纵横比-Java 学习之路

我一直在寻找答案 . 我更喜欢只有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>


<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;
}

1 回答

0
简短的回答，希望有所帮助，试试 max-height ：
```
img {
  max-height: 90vh;
  max-width: 50%;
  display: inline-block;
}
```
回复于 2024-04-29T01:18:56+08:00

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

1 回答

相关问题