幻灯片放映 img 在 wordpress 主题中缩小？答案

【问题标题】：slide show img shrink in wordpress theme?幻灯片放映 img 在 wordpress 主题中缩小？
【发布时间】：2018-01-17 10:48:06
【问题描述】：

我刚得到这个主题并尝试像文档中推荐的大小一样导入背景图像，但似乎有些奇怪并且这些图片在主题 style.css 中存在 CSS 问题

这是我网站的链接 http://test.doublelift.kr

这里是实际模板的演示

http://www.cssvillain.com/hungry/

如果您调整窗口大小并看到图像文件缓慢缩小而不是根据像素更改宽度，则问题很明显。

图像宽度基于我所拥有模板的百分比，所以我尝试让它自动并根据高度编写样式，就像原始模板一样但似乎它正在从其他地方阅读风格 chrome的开发者工具没有成功

感谢您的帮助

【问题讨论】：

标签： html css wordpress width

【解决方案1】：

#single-page-header {
    height: 1000px !important;
    overflow-y: visible !important;
}

.cycle-slideshow {
    position: relative !important;
}

#single-pager-header .cycle-slideshow img {
    display: block !important;
    max-height: 1000px !important;
    width: auto !important;
}

@media screen and (max-width: 1370px) and (min-width: 1025px) {
    #single-page-header {
        height: 720px !important;
    }

    #single-page-header .cycle-slideshow img {
        max-height: 720px !important;
    }
}

@media screen and (max-width: 1024px) {
    .single-page-header-content {
        overflow: hidden !important;
    }

    .single-page-header-content .cycle-slide-show {
        overflow: hidden !important;
    }
}

@media screen and (max-width: 1024px) and (min-width: 768px) {
    #single-page-header .cycle-slideshow img {
        max-height: 1000px;
    }
}

@media screen and (max-width: 767px) {
    #single-page-header {
        height: 500px !important;
        overflow: hidden !important;
    }
}

@media screen and (min-width: 1025px) {
    #single-page-header .cycle-slideshow img {
        max-height: 1000px;
    }
}

【讨论】：

【解决方案2】：

您可以在那里更改特定屏幕尺寸选项的旋转滑块设置，然后根据您的要求更改 css。这是我看到的最好的处理方式。

【讨论】：