css 移动的尺寸的图像消失

epggiuax  于 2023-03-20  发布在  其他
关注(0)|答案(1)|浏览(138)

我一直在使用一个html主题,刚刚注意到有几个图片在移动的尺寸下消失了(在桌面上显示很好)。这是一个完整的半页文本的部分,然后页面的另一半充满了图片。例如:你可以看到这个部分旁边的图像-猫和兔子的移动的指甲修剪。
https://amberpollypets.co.uk/mobile-nail-clipping-dogs.html
我认为有几种风格适用于图像:section-media,section-media-half,section-media-half-right,当我查看样式表时:style.css有几行代码用于这些样式。
我试着修改@media下的代码(最小宽度:992 px).section-media-half〉img {显示:无;}到{显示:block;}但是什么都没有改变。也许我需要以更小的屏幕尺寸为目标?
任何帮助都感激不尽

/* Media (BG) */
.section-media-bg > * {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
}

/* Media (Half) */
.section-media-half {
    height: auto;
    position: relative;
    margin-bottom: 72px;
}
.section-media-half > * {
    margin: 0;
    padding: 0;
    width: 100%;
    display: block;
}
@media (min-width: 992px) {

    .section-media-half {
        margin: 0;
        width: 50%;
        height: 100%;
        position: absolute;
    }
    .section-media-half-left {
        left: 0;
        right: auto;
    }
    .section-media-half-right {
        left: auto;
        right: 0;
    }
    
    .section-media-half > img {
        display: none;
    }

    .section-media-half > .gmap-block,
    .section-media-half > .gmap-block > .map {
        height: 100% !important;
    }

    .section-media-half + .container {
        max-width: 50%;
        padding-left: 72px;
        padding-right: 72px;
    }
    .section-media-half-left + .container {
        margin-left: auto;
        margin-right: 0;
    }
    .section-media-half-right + .container {
        margin-left: 0;
        margin-right: auto;
    }

}
@media (min-width: 1400px) {

    .section-media-half + .container {
        padding-left: 108px;
        padding-right: 108px;
    }

}
r3i60tvu

r3i60tvu1#

那些可爱的狗图像大小减少到一半的原因是这个代码

-webkit-background-size: 110% !important; 
-moz-background-size: 110% !important;
-o-background-size: 110% !important;
 background-size: 110% !important;

在.desktop-device .视差部分内
用此代码替换您的代码

.desktop-device .parallax-section {
background-repeat: no-repeat !important;
background-attachment: fixed !important;
/* -webkit-background-size: 110% !important; */
/* -moz-background-size: 110% !important;*/
/*-o-background-size: 110% !important;*/
/* background-size: 110% !important;*/
}

或者你也可以把这个

-webkit-background-size: 110% !important; 
-moz-background-size: 110% !important;
-o-background-size: 110% !important;
 background-size: 110% !important;

还有密码。
希望这能有所帮助
额外信息:你的图片太大了,不利于搜索引擎优化,把你的图片从jpg格式转换成webp格式会提高你的网站速度

相关问题