为什么我的照片在移动设备上延伸？

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;
}

Answer 2

好的，我找到了解决方案：

class =“img_mobile”应该在img标签内

但我仍然想知道为什么这个错误无法通过firefrox开发工具检查...所以如果有人知道如何测试移动页面......