猫头鹰旋转木马切割div-Java 学习之路

我有一点问题 . 我使用OwlCarousel 2制作'testimonial rotator/slider'，但它看起来像是：
enter image description here

但我需要这样的想法 - 图像被切割在顶部：
enter image description here

我把'box'打包在一个div中，但它没有解决它 .
这是我的HTML：

<div>
    <div class="testimonial-box">
        <div class="testimonial-content">
            <div class="testimonial-logo">
                <img src="http://placehold.it/100x100" alt="" class="img-responsive img-thumbnail pull-left" />
            </div>
            <p>
                <!-- CONTENT -->
            </p>
            <div class="testimonial-meta">
                <p>
                    <h5>Lorem Ipsum</h5>
                    <span>, <i>Web Developer</i></span>
                </p>
                <p class="website">
                    <a href="http://vrs-factory.pl">VRS-Factory</a>
                </p>
            </div>
        </div>
    </div>
</div>

和CSS [SASS]：

section.testimonials {
        padding: 30px 0;

        .testimonial-logo {
            img {
                margin-top: -88px;
            }
        }

        .testimonial-content {
            border: 1px solid rgba( $SecondColor, .2 );
            border-radius: 3px;
            padding: 20px;
        }

        .testimonial-meta {
            h5 {
                display: inline-block;
                margin-bottom: 0;
            }
        }

        .owl-carousel {
            .owl-item {
                img {
                    width: auto;
                }
            }
        }
    }

UPDATE: 这是演示：DEMO

1 回答

0
这是因为 overflow: hidden 的 .owl-carousel .owl-stage-outer .

我在 .owl-item 上添加 margin-top 来修复它 .
```
.owl-item { margin-top: 70px; }
```
Live example
回复于 2024-05-03T16:30:25+08:00

猫头鹰旋转木马切割div

1 回答

相关问题