javascript - Maintaining the aspect ratio of a scalable image -

i using css property transform: translatey vertically center image on page. width of image percentage of of page scaled if user enlarges or reduces browser window.

here markup:

<div class="item">     <img src="..." width="50%"> </div> 

here css:

.item {     width: 100%;     height: 100%;     text-align: center; } div.item > img {     max-height: 100%;     max-width: 100%;     position: relative;     top: 50%;     transform: translatey(-50%); } 

this works unless browser window shorter wide in case height of image trimmed or, setting maximum height of image 100%, squished. can see problem drastically reducing height of browser window while viewing demo: https://jsfiddle.net/0zh4qvlm/. how can maintain aspect ratio of image in instance?

change css to

div.item > img {     max-height: 100%;     max-width: 50%;     width:auto;     position: relative;     top: 50%;     transform: translatey(-50%);     -webkit-transform: translatey(-50%); } 

and remove width attribute <img>

updated fiddle