小编min*_*are的帖子

以下小提琴在Chrome/Firefox中正确显示图像比率.

但是,在Internet Explorer中,图像(应该是正方形)在调整大小以适合其容器时,会在flexbox布局中保留其原始高度.

http://jsfiddle.net/minlare/knyagjk5/

<section>
<article>
    <div class="details">
        <img src="http://i.ytimg.com/vi/rb8Y38eilRM/maxresdefault.jpg" alt="face"/>
        <h4>Name</h4>
        <div class="description">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a ultrices lectus. Curabitur molestie volutpat mattis.</p>
        </div>
    </div>
</article>
<article>
    <div class="details">
        <img src="http://i.ytimg.com/vi/rb8Y38eilRM/maxresdefault.jpg" alt="face"/>
        <h4>Name</h4>
        <div class="description">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a ultrices lectus. Curabitur molestie volutpat mattis. Fusce fermentum auctor mauris, auctor lacinia mauris ornare faucibus.</p>
        </div>
    </div>
</article>
</section>

section{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox; …

我正在使用swiperjs，并且希望只允许用户一次滑动一项。

我每个视图显示 1 张幻灯片slidesPerView=1，如下所示：参数。

我看不到任何明显的东西来确保滑动器一次只更改一张幻灯片。
有没有办法做到这一点？

我正在寻找一种仅使用css背景创建箭头的方法.

在我的情况下,这是一个选择下拉列表,因此不能使用select不支持的伪元素.

我知道如果不能使用背景,我可以使用canvas来实现这一点 - 使用<canvas>作为CSS背景

如果使用css(不透明度)对具有小数宽度的元素中的图像进行动画处理,则图像将以固定像素宽度加载,然后在完成转换后将大小更改为正确的小数像素.

我只在Chrome上测试了这个.请参阅小提琴,仅在使用css动画时显示问题.http://jsfiddle.net/minlare/kext0af4/

.opacity{
    width: 400px;
}
.opacity div {
    width: calc(100% / 3);
    float: left;
}
.opacity img{
    max-width: 100%;
    display: block;
    opacity: 1;
    transition: .25s;
}
.opacity img.visible{
    opacity: 0;
}

有什么方法吗？