html - 缩放两个不同的img以适合屏幕

我正在尝试缩放两个图像以适合移动屏幕，同时保持其原始比例而不会溢出。当我尝试应用最大宽度时，它只会在一张图像低于屏幕宽度时才显示。

.one img {
  position: absolute;
  width: 200px;
  height: 200px;
}

.two img {
  position: absolute;
  margin-left: 200px;
  width: 300px;
  height: 200px;
}

<div class="one"><img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Distribution_H._leucocephalus.png"></div>
<div class="two"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Back_to_the_Six_Mile_Lake_eagles_%28Haliaeetus_leucocephalus%29.%22feed_me_mom%22._%2819159890706%29.jpg/800px-Back_to_the_Six_Mile_Lake_eagles_%28Haliaeetus_leucocephalus%29.%22feed_me_mom%22._%2819159890706%29.jpg"></div>

最佳答案

尝试：

* {
  margin: 0;
  padding: 0;
}

.slider {
  display: flex;
}

.slider .slide img {
  width: 100%;
}

<div class="slider">
  <div class="slide">
    <img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Distribution_H._leucocephalus.png" style="max-width: 200px;">
  </div>
  <div class="slide">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Back_to_the_Six_Mile_Lake_eagles_%28Haliaeetus_leucocephalus%29.%22feed_me_mom%22._%2819159890706%29.jpg/800px-Back_to_the_Six_Mile_Lake_eagles_%28Haliaeetus_leucocephalus%29.%22feed_me_mom%22._%2819159890706%29.jpg"
      style="max-width: 300px;">
  </div>
</div>

关于html - 缩放两个不同的img以适合屏幕，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50738992/