倾斜的两列布局不是全角答案

【问题标题】：two column layout with skew not fullwidth倾斜的两列布局不是全角
【发布时间】：2018-06-21 11:57:46
【问题描述】：

我的三个 feture-three 列部分列可能有一定程度的倾斜，但我的设计不是 100% 匹配，这怎么可能？谁能帮帮我。

我的示例代码在这里

<div class="container feture-three-columns">
    <div class="column">
        <div class="img-wrap">
            <img class="img-desktop" src="images/feture-image1.png" alt="" width="534" height="421" />
            <img class="img-mobile" src="images/feture-image1.png" alt="" width="534" height="421" />
        </div>
        <div class="grilles">
           content
        </div>
    </div>
    <div class="column">
        <div class="img-wrap">
            <img class="img-desktop" src="images/feture-image2.png" alt="" width="534" height="421" />
            <img class="img-mobile" src="images/feture-image1.png" alt="" width="534" height="421" />
        </div>
       <div class="grilles">
           content
        </div>
    </div>
    <div class="column">
        <div class="img-wrap">
            <img class="img-desktop" src="images/feture-image1.png" alt="" width="534" height="421" />
            <img class="img-mobile" src="images/feture-image1.png" alt="" width="534" height="421" />
        </div>
        <div class="grilles">
           content
        </div>
    </div>
</div>

我的 CSS 或 HTML 代码有什么问题，请描述一下

.feture-three-columns {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}
.feture-three-columns .column {
    width: 33.333333%;
    position: relative;
}
.feture-three-columns .img-wrap {
    transform: rotate(-17deg);
}
.feture-three-columns .column  img {
    display: block;
    width: 119%;
    height: auto;
    transform: rotate(17deg) translateX(-83px);
}
.feture-three-columns .column  img.img-mobile { display: none; }

【问题讨论】：

标签： html css transform skew

【解决方案1】：

我认为您正在寻找translate: skew。在下面的示例中，我已将此添加到您的 img-wrap 类中并删除了旋转。我还从图像本身中删除了变换。

.feture-three-columns {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}
.feture-three-columns .column {
    width: 33.333333%;
    position: relative;
}
.feture-three-columns .img-wrap {
    transform: skew(-10deg) translateX(-12%);
}
.feture-three-columns .column  img {
    display: block;
    width: 120%;
    height: auto;
}
.feture-three-columns .column  img.img-mobile { display: none; }

<div class="container feture-three-columns">
    <div class="column">
        <div class="img-wrap">
            <img class="img-desktop" src="https://res.cloudinary.com/da65r8o0n/image/upload/v1529585338/samples/landscapes/beach-boat.jpg" alt="" width="534" height="421" />
            <img class="img-mobile" src="https://res.cloudinary.com/da65r8o0n/image/upload/v1529585338/samples/landscapes/beach-boat.jpg" alt="" width="534" height="421" />
        </div>
        <div class="grilles">
           content
        </div>
    </div>
    <div class="column">
        <div class="img-wrap">
            <img class="img-desktop" src="https://res.cloudinary.com/da65r8o0n/image/upload/v1529585338/samples/landscapes/beach-boat.jpg" alt="" width="534" height="421" />
            <img class="img-mobile" src="https://res.cloudinary.com/da65r8o0n/image/upload/v1529585338/samples/landscapes/beach-boat.jpg" alt="" width="534" height="421" />
        </div>
       <div class="grilles">
           content
        </div>
    </div>
    <div class="column">
        <div class="img-wrap">
            <img class="img-desktop" src="https://res.cloudinary.com/da65r8o0n/image/upload/v1529585338/samples/landscapes/beach-boat.jpg" alt="" width="534" height="421" />
            <img class="img-mobile" src="https://res.cloudinary.com/da65r8o0n/image/upload/v1529585338/samples/landscapes/beach-boat.jpg" alt="" width="534" height="421" />
        </div>
        <div class="grilles">
           content
        </div>
    </div>
</div>

【讨论】：

感谢您的回答，但效果并不理想，我的第一张图片显示大，第二张正常，第三张是我问的大显示。