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

Question

我的图片尺寸是 640*820，我想把这张图片放到 310*520 的屏幕上。在这样做的同时保持纵横比(没有拉伸(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

你可以只声明图像的宽度并让高度自动

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