css 横幅图像在移动的上放大

pxyaymoc 于 2023-03-25 发布在其他

关注(0)|答案(3)|浏览(153)

我有一个静态的html页面www.poggenamp.com与移动的版本.移动的方式出现放大，我不知道如何修复它.通过Chrome的检查以及我的iPhone检查13 Pro.我已经添加了我的CSS代码，应用到横幅，并删除了其余部分.

@media only screen and (max-width: 1400px) {
    .container {
        max-width: 1140px
    }

    .banner:after {
        width: 100%;
    }
}

@media only screen and (max-width: 1199px) {
    .buttonmain {
        padding: 12px 10px;
        font-size: 14px;
    }

    .banner {
        padding: 60px 0 120px;
    }

    .banner .title {
        font-size: 36px;
        line-height: 44px;
    }

@media only screen and (max-width: 991px) {
    .banner .title {
        font-weight: 800;
        font-size: 30px;
        line-height: 38px;
    }

    @media only screen and (max-width: 767px) {
        .banner {
            padding: 60px 0 130px;
        }

        .banner:after {
            height: 100vh;
            width: 100%;
            background-size: cover;
            background: url(../images/MobileBannerPANG.jpg);
            opacity: 0.2;
            z-index: -10;
        }

        .banner:before {
            height: 50%;
            top: -50px;
        }
    }

css

来源：https://stackoverflow.com/questions/75809874/banner-image-zooms-in-on-mobile

3条答案

按热度按时间

uhry853o1#

通过在background属性之后设置background属性，您将覆盖background-size属性。请改用background-image。
因此，代替：

.banner:after {
    background-size: contain;
    background: url(../images/MobileBannerPANG.jpg);
}

用途：

.banner:after {
    background-size: contain;
    background-image: url(../images/MobileBannerPANG.jpg);
}

对@media中的用户也这样做。

赞(0）回复(0）举报 2023-03-25

ikfrs5lh2#

我猜这和background-size有关。相反，cover，尝试contain，auto或其他可用的选项，直到你得到你想要的

赞(0）回复(0）举报 2023-03-25

ldioqlga3#

您正在使用两个不同的图像，低于和高于1199 px：
〉1199px：https://www.poggenamp.com/images/BANNERPGC.jpg
〈= 1199px：https://www.poggenamp.com/images/MobileBannerPANG.jpg

.banner:after {
    content: "";
    background: url(../images/BANNERPGC.jpg) center no-repeat;
    height: 50vh;
    background-size: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 0.2;
    z-index: -10;
}

@media only screen and (max-width: 1199px) {
    /* ... */
    .banner:after {
        background-size: contain;
        background: url(../images/MobileBannerPANG.jpg);
    }
}

比较两个图像的内容，图像中项目的显示大小在切换点1199 px处不同，您可以获得背景的缩放跳跃。
你也有一个位置跳跃时，它切换。
解决这个问题的一个可能性是改变定义：

.banner:after {
    content: "";
    /* background: url(../images/BANNERPGC.jpg) center no-repeat; */

    background-image: url(../images/BANNERPGC.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100vh;

    height: 50vh;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 0.2;
    z-index: -10;
}
/* ... */
@media only screen and (max-width: 1199px) {
    /* ... */
    .banner:after {
        background-size: auto 100vh;
        background: url(../images/MobileBannerPANG.jpg);
    }
}

由于图片的“移动的”版本是水平边缘的居中裁剪（并按比例缩小），center将适合1199 px的两个图像。-但移动图片的宽度至少应该得到1199 px的宽度。

赞(0）回复(0）举报 2023-03-25

我来回答

css 横幅图像在移动的上放大

3条答案

相关问题

热门标签

最新问答