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

时间:2018-02-06 20:08:44

标签: image css3

这是firefox开发中的版本:

enter image description here

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

enter image description here

(请注意,女孩照片上方的动画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. 如何在开发中看到这个错误?
  3. 感谢您的帮助

2 个答案:

答案 0 :(得分:0)

尝试

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

答案 1 :(得分:0)

好的,我找到了解决方案:

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

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