how to fit image without stretching and maintain aspect ratio in div tag in html

Question

My image size is 640*820.And I want to fit this image into screen of size 310*520. While doing this maintain aspect ratio(without stretch).

<div class="abc" style="
    background: url("images/phone.png");
    position: absolute;
    max-width: 100%;
    width: auto;
    margin-left:10px;
    background-size: contain;
    top: 50px;">

Answer 1

You could just state the width of the image and have the height auto

.div img {
   width: 310px;
   height: auto;
}
<div class="div">
  <img src="#" title="#">
</div>