Resize Image with CSS

Preserve Image aspect ratio while resizing it in container with lesser size

HTML

<div>
    <img src="http://images.all-free-download.com/images/graphiclarge/various_cliparts_clip_art_12882.jpg" />
    
</div>

CSS

div {
    width: 200px;
    height: 200px;
    background: transparent text-align: center;
    display: flex;
    flex: 1 1 auto;
}
div img {
    max-width: 90%;
    max-height: 90%;
    vertical-align: middle;
    background-color: transparent;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding:10px;
    box-shadow:0px 0px 15px 0px rgba(50, 50, 50, 0.21),
        inset 0px 0px 15px 0px rgba(100,100,100,0.47);
        align-items: center;
        justify-content: center;
}