对垂直图像进行不同的样式设置，使它们并排运行

Styling vertical images differently so they run side-by-side

本文关键字：运行 设置 样式 图像 垂直      更新时间：2023-09-26

我正在建立一个图片库，并有水平和垂直图像。此时图像一个接一个地加载，垂直堆叠。

它在水平图像上工作得很好，但是一旦我在布局上有一个垂直图像，它就会拉伸以匹配水平图像的宽度，并且变得太高而不适合屏幕。

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

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

图片<-抱歉我不能发布图片。

理想情况下会有一个只使用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]的链接

作为一个奖励，它将是伟大的，能够检查有多少垂直图像，我有一个序列和位置，所有他们并排。;)

谢谢!

选项1:

你提到你无法访问html。为了访问第n个元素的css，您可以使用第n- 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/

这里有一个解决方案:

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

相关文章：