调整图像大小时轮播下方的空白区域答案

【问题标题】：White space below carousel when resizing image调整图像大小时轮播下方的空白区域
【发布时间】：2019-09-26 16:09:54
【问题描述】：

我遇到了一个似乎无法解决的问题。我正在使用 uncode 主题-wordpress。如果您在桌面上看到链接，则轮播的图像比它需要的要大得多。在手机上是可以的。我希望它适合屏幕的可用尺寸，或者至少与它匹配。
我试过css和js，但是如果我改变轮播图像的高度，它下面会有一个巨大的空白。在 WP 中没有可用的选项，所以我假设需要 css/js。
我添加了这个自定义 css 以使其对您可见错误。如果去除了空白间距，我可以轻松地制作 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;
}}

有什么想法吗？

Link Here

【问题讨论】：

您是否在为 Wordpress 使用轮播插件？
@Sole 它是 WPBakery 页面构建器的默认轮播
使用您购买的主题中包含的Revolution Slider，它将为您提供更多自定义滑块的选项。

标签： javascript html css wordpress

【解决方案1】：

您可以为图像设置最大高度，并将其仅应用于 1100 像素以上的桌面屏幕。像这样：

@media (min-width: 1100px) {
.owl-carousel .owl-item img {
    max-height: 400px;
}}

【讨论】：

我试过这种方法，但是改变图片的大小会出现错误