垂直图像的样式不同，因此它们可以并排运行

Question

我正在建立图片库，并具有水平和垂直图像。 此刻，图像逐张加载，垂直堆叠。

它适用于水平图像，但是一旦我在布局上有了垂直图像，它就会拉伸以匹配水平图像的宽度，并且变得过高而无法适合屏幕。

我试图找到一种解决方案，以始终并排对齐两个垂直图像。

以下是一些图形，用以说明我要实现的目标：

图片 <-很抱歉，我无法发布图片。

理想情况下，将只使用CSS解决方案，但我认为这是不可能的。 因此，我使用了一些jQuery。

$('.image-wrapper').prop('height', function(){
if($(this).height() > $(this).width()){
    //portrait, resize accordingly
    var width = $(this).width();
    var height = $(this).height();
    $(this).css({"width": "50%", "float": "left"});
});

该解决方案的唯一问题是，它没有考虑DIV的边距。 而且我找不到补偿的方法。

这是JSfiddle的链接

更新 ：

我已经对jQuery进行了调整，以测试先前的图像是否垂直，并在它们之间添加边距。 我只是想知道这种解决方案的可靠性。

这是[小提琴] [4]的链接

另外，能够检查一个序列中有多少垂直图像并将它们并排放置，将是很棒的。 ;）

谢谢！

Answer 1

选项1：

您提到您无权访问html。 为了访问第n个元素的CSS，可以使用nth-of-type（x）选择器。

这是有关此的一些信息： http : //www.w3schools.com/cssref/sel_nth-of-type.asp

仅使用CSS，添加以下内容：

.image-wrapper:nth-of-type(2),.image-wrapper:nth-of-type(3){
    float:left;
    width:50%;
    padding:0;
    margin:0;
}

并删除您的js。 这应该做。

演示： http ： //jsfiddle.net/dsfa2bvu/39/

选项2：

使用Jquery，在每个图像中找到单词“ vertical”。 找到后，为其添加样式。

定位方法如下：

var x = $("img[src$='vertical-img']");
x.css("float","left");

演示： http ： //jsfiddle.net/dsfa2bvu/40/

Answer 2

这是一种解决方案：

$('.thumb-image').each(function (i, obj) {
        if ($(this).width() > $(this).eq(i + 1).width()) {
            $('.thumb-image').slice(i + 1).each(function () {

                $(this).css({
                    float: "left",
                    width: "50%",
                    padding: "0",
                    margin: "0"


                });
            });
        }

    });

小提琴编辑 ： http : //jsfiddle.net/dsfa2bvu/41/