wordpress 主题中的幻灯片图像缩小?
slide show img shrink in wordpress theme?
我刚得到这个主题并尝试导入文档中推荐大小的背景图片,但似乎有些奇怪
这些图片在主题 style.css
中有 CSS 个问题
这是我网站的 link
http://test.doublelift.kr
这里是实际模板的演示
http://www.cssvillain.com/hungry/
如果您调整 window 的大小并看到图像文件缓慢缩小而不是根据 px 更改宽度,则问题很明显。
我手上的模板图片宽度是按百分比显示的,所以我试着让它自动按照高度写样式,就像原来的模板一样
但似乎它正在从其他地方读取样式
chrome 的开发者工具
没有成功
感谢您的帮助
#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;
}
}
您可以在那边更改特定屏幕尺寸选项的旋转滑块设置,然后根据您的要求更改 css。
这是我看到的最好的处理方式。
我刚得到这个主题并尝试导入文档中推荐大小的背景图片,但似乎有些奇怪 这些图片在主题 style.css
中有 CSS 个问题这是我网站的 link http://test.doublelift.kr
这里是实际模板的演示
http://www.cssvillain.com/hungry/
如果您调整 window 的大小并看到图像文件缓慢缩小而不是根据 px 更改宽度,则问题很明显。
我手上的模板图片宽度是按百分比显示的,所以我试着让它自动按照高度写样式,就像原来的模板一样 但似乎它正在从其他地方读取样式 chrome 的开发者工具
没有成功感谢您的帮助
#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;
}
}
您可以在那边更改特定屏幕尺寸选项的旋转滑块设置,然后根据您的要求更改 css。 这是我看到的最好的处理方式。