【问题标题】:Skew an image on the sides without distortion在侧面倾斜图像而不失真
【发布时间】:2017-09-20 07:04:46
【问题描述】:

我想在 owl-carousel 中使用 css 倾斜图像。

SCSS:

.owl-item {
    > div {
        transform: skew(-20deg, 0);
        overflow: hidden;

        > img {
            transform: skew(20deg, 0);
        }
    }
}

HTML:

<div class="owl-carousel" id="promo">
    <div><img src="/images/slide1.jpg" alt=""></div>
    <div><img src="/images/slide2.jpg" alt=""></div>
    <div><img src="/images/slide3.jpg" alt=""></div>
</div>

无法让它工作。现在看起来是这样的:https://yadi.sk/i/5Y8RQ5ts3N4iny

我希望它正在寻找:https://yadi.sk/i/PjzaXEx93N4iuV

但没有图像失真。

【问题讨论】:

    标签: jquery css transform owl-carousel skew


    【解决方案1】:

    将图像放入容器 div 中。将skew 转换应用于容器 div,比如说transform: skew(20deg)。然后图像失真,就像你说的那样。但是如果你将skew(-20deg) 应用于容器内的图像,它看起来一切正常。给容器添加一些额外的属性,就可以达到想要的效果了。

    示例:https://codepen.io/anon/pen/mBPxjY

    【讨论】:

    • 您的意思是添加图片作为背景?不适用于纯图像?
    • 我猜你可以让它工作......我不知道猫头鹰旋转木马是如何工作的 tbh
    猜你喜欢
    • 2018-12-22
    • 1970-01-01
    • 2020-05-18
    • 2018-10-02
    • 2019-12-18
    • 2020-09-25
    相关资源
    最近更新 更多