如何在不拉伸的情况下适合图像并在html的div标签中保持纵横比

Question

我的图片尺寸为640 * 820。我想将此图片适合尺寸为310 * 520的屏幕。 在执行此操作时，请保持宽高比（无拉伸）。

<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

您可以只声明图像的宽度并自动设置高度

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