HTML Element Style How to - Fit image width to screen by preserving ratio and max size

Question

We would like to know how to fit image width to screen by preserving ratio and max size.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
img {<!--  ww w.  j a  va2  s . c  o m-->
  max-width: 100%;
  height: auto;
}
</style>
</head>
<body>
  <img src="http://www.java2s.com/style/download.png" />
</body>
</html>

The code above is rendered as follows: