不管容器大小如何，使img增长到最大宽度/高度，并保持宽高比

Question

我有一个<img> ，它绝对位于<div> 。 <div>是100px x 100px。 单击<img>时，应增长到已知的最大宽度或高度，例如500px x 700px。 如果<img>较小，例如300px x 250px，则该像素应为应有的大小。 纵横比应保持不变。

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

我正在寻找CSS或香草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>