以不同的方式设置垂直图像的样式，以便它们并排运行

Question

我正在构建一个图片库，并拥有水平和垂直图像。目前，图像一个接一个地加载，垂直堆叠。

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

我正在尝试找到一种解决方案，始终将 2 个垂直图像并排对齐。

这里有一些图表来说明我想要实现的目标：

Image

理想情况下，会有一个仅使用 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 来测试之前的图像是否是垂直的，并在它们之间添加边距。我只是想知道这个解决方案有多可靠。

这是 [Fiddle][4] 的链接

作为奖励，如果能够检查我在一个序列中有多少垂直图像并将它们并排放置，那就太好了。 ;)

谢谢！

Answer 1

这是一种解决方案：

$('.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/

Answer 2

选项 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，在每个图像中找到“垂直”一词。找到后，为其添加样式。

找到它的方法如下：

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

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