[英]White space below carousel when resizing image
I've come across an issue i cannot seem to solve.我遇到了一个我似乎无法解决的问题。 Im using uncode theme- wordpress.
我使用的是 uncode 主题-wordpress。 If you see the link in desktop, the images of the carousel are waaay bigger than it needs to be.
如果您在桌面上看到链接,则轮播的图像比它需要的要大得多。 On mobile it is ok.
在手机上是可以的。 i want it to fit the available size of screen, or at least kind of match it.
我希望它适合屏幕的可用尺寸,或者至少匹配它。
I have tried css and js, but if i change the height of the carousel image, there is a HUGE white space below it.我试过 css 和 js,但是如果我改变轮播图像的高度,它下面会有一个巨大的空白。 there are no options available for this inside WP, so im assuming css/js is needed.
在 WP 中没有可用的选项,所以我假设需要 css/js。
I added this custom css to make it visible for you the error.我添加了这个自定义 css 以使其对您可见错误。 If the white spacing is removed, i can make the JS code easily so the images fit the screen:
如果删除了空白间距,我可以轻松地制作 JS 代码,以便图像适合屏幕:
.post-content .vc_row.limit-width.row-container {
max-width: 100%;
}
.post-content .row-parent {
padding: 0 !important;
}
#gallery-206225 .owl-dots{bottom:-22px!important;}
.owl-carousel .owl-item img {
width: auto!important;
height: 500px!important;
display: block;
margin: 0 auto;
}
@media(max-width:768px){
.owl-carousel .owl-item img {
width: 90%!important;
height: auto!important;
max-height:900px;
}}
any thoughts?有什么想法吗?
You can set a max-height to the image and have that apply only to desktop screens above 1100px.您可以为图像设置最大高度,并使其仅适用于 1100 像素以上的桌面屏幕。 Like so:
像这样:
@media (min-width: 1100px) {
.owl-carousel .owl-item img {
max-height: 400px;
}}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.