Question

我的<img>绝对位于<div>之内。 <div>为100px×100px。单击时，<img>应增长到已知的最大宽度或高度，例如500px乘700px。如果<img>较小，比如300px乘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>

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

1 个答案: