HTML Element Style How to - Enlarge image to fit in img tag with round Border, cut off image

Question

We would like to know how to enlarge image to fit in img tag with round Border, cut off image.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
div {<!--  www.j a v  a 2s . c  om-->
  max-height: 400px;
  max-width: 200px;
  margin: 50px 150px;
  background-color: white;
  border: 5px solid #66CCFF;
  border-radius: 30px;
  -moz-border-radius: 30px;
  overflow: hidden;
}

img {
  width: 200px;
  height: 400px;
}
</style>
</head>
<body>
  <div>
    <img src="http://www.java2s.com/style/download.png">
    </img>
  </div>
</body>
</html>

The code above is rendered as follows: