图片不压缩，图片随浏览器两端同时缩进

最新推荐文章于 2020-12-09 22:26:46 发布

trifling_

最新推荐文章于 2020-12-09 22:26:46 发布

阅读量964

点赞数 1

分类专栏： css 文章标签：自适应布局图片随浏览器两端同时缩进

本文链接：https://blog.csdn.net/Trifling_/article/details/59099052

版权

4 篇文章 0 订阅

订阅专栏

问题描述：图片随浏览器两端同时缩进

    <div class="img-container">
        <img src="../img/background_1.png" class="img-home" alt="home">
    </div>

.img-container{
    position: absolute;
    left: 50%;
    margin-left: -960px;
    overflow: hidden;
}

关键点：图片的父容器img-container 有固定宽度，left:容器宽度百分比一半（50%）,margin-left:图片固定值一半（-1920/2 = -960px）；

效果：两张图片中地球大小是一样，截图有所出入

初始时

浏览器缩小后

关注