image - 为什么我的图片在手机上被拉伸(stretch)了？

Question

这是 firefox 开发中的版本:

这是真实手机中的屏幕复制:

(注意妹子图片上方的gif动图就可以了)

这是CSS:

    .img_mobile {
        margin:auto;
        width: 100%; 
        max-width: 100%; 
        height: auto;
    }

#conteneur {
 display:flex;
 flex-direction: row;
 justify-content: center;
}

这是 HTML 的一部分:

<div class="img_mobile" id="conteneur">
        <img src="{% static 'img/home/img-mobile-01.jpg'  %}?{{ git_last_commit }}" alt="">
        <img src="{% static 'img/home/animation-image-1.gif'  %}?{{ git_last_commit }}" alt="" style="position:absolute; mix-blend-mode: screen;">
    </div>

2 个问题:

1. 我应该怎么做才能解决这个问题？
2. 如何在开发中发现这个错误？

感谢帮助

Answer 1

尝试

.img_mobile {
    margin:auto;
    width: 100%; 
    max-width: 100%; 
    height: auto;
    object-fit: cover;
}