javascript - 无论容器如何，都使 img 增长到最大宽度/高度并保持纵横比

Question

我有一个 <img>绝对位于 <div> 内. <div>是 100px x 100px。<img> ，当点击时，应该增长到已知的最大宽度或高度，比如 500px x 700px。如果<img>更小，比如 300px x 250px，那么它应该达到的最大。应保持纵横比。

将高度和宽度设置为 100% 只会使 <img>包含 <div> 的大小.

我正在寻找 css 或 vanilla javascript 解决方案。 (我不需要点击动画的代码，只需要一个静态的最终结果，这样我就可以应用这个概念)

Answer 1

将图像的最大宽度设置为 100%。高度应设置为自动。

解决方案 1:当图像可以增长到其父 div 的宽度时:

.wrapper {
  width: 500px;
  height: 500px;
  border: 1px solid red;
  position: absolute;
}
.wrapper img {
  /*width:100%;*/
  height: auto;
  max-width: 100%;
}

<div class="wrapper">

  <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

</div>

解决方案 2:最初图像宽度将受到 max-width 属性的限制，以保持在缩略图大小内。

单击图片时，删除缩略图类，使其自然地溢出父级以恢复其原始大小

.wrapper {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  /*position: absolute;*/
}
.wrapper img.thumbnail {
  /*width:100%;*/
  height: auto;
  max-width: 100%;
}

<div class="wrapper">
  Initially
  <img class="thumbnail" src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

</div>

<div class="wrapper">
  On click
  <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

</div>