Question

我需要根据其中img的方向调整容器大小。因此，宽度：50％容器用于纵向图像，宽度：100％容器用于横向图像。

JQuery我能够提出，不起作用。它只是添加了两个类中的一个，与它看起来的内容无关。

使用Javascript：

$(".galleryelement").addClass(function() {
        if (".galleryelement img".height > ".galleryelement img".width) {
            return "portrait";
        } else {
            return "landscape";
        }
});

粗糙的HTML：

    <div class="gallery">

      <div class="galleryelement"><img></div>
      <div class="galleryelement"><img></div>
      <div class="galleryelement"><img></div>
      <div class="galleryelement"><img></div>  

    </div>

CSS：

.portrait {
    width: 50%;
}

.landscape {
    width: 100%;
}

我制作了一个小提琴来说明问题：JSFiddle

希望有人发现我的错误并提供帮助。该代码使用flickity滑块。

Answer 1

".galleryelement img"是一个有效的选择器，但不会产生包含匹配元素的jQuery对象。

修复此问题（$(".galleryelement img")）后，下一步就是调用方法.height()。如果没有括号，这将给你函数本身而不是调用后的返回值。

我们现在有了这个：

$(".galleryelement img").height()

对于if条件的第二部分，必须这样做。

$(".galleryelement img").width()

if条件现在是

if ($(".galleryelement img").height() > $(".galleryelement img").width())

现在我们不会将undefined与undefined :)进行比较但这还没有产生预期的结果。

".galleryelement img"会返回与此选择器匹配的所有图片，但您只需要current .galleryelement的图片。并且因为我们不想为同一图像创建两次jQuery对象，所以我们将对象保存在变量中并在if

中使用它

$(".galleryelement").addClass(function () {
    var img = $(this).find("img");

    if (img.height() > img.width()) {
        return "portrait";
    } else {
        return "landscape";
    }
});

fiddle

Answer 2

Meybe你可以使用CSS3解决方案，如下面的代码：

@media only screen
and (orientation:portrait)
and (max-aspect-ratio: 13/9)
{
.galleryelement{
    width: 50%;
 }
}

@media only screen
 and (orientation:landscape)
 and (min-aspect-ratio: 13/9)
{
 .galleryelement{
    width: 100%;
 }
}

Answer 3

您的jsfiddle仅在文档就绪时运行 - 仅适用于第一个图像 - 以及jquery无法正常工作。

这是一个小提琴https://jsfiddle.net/wgqdsnmk/10/，它不需要应用新的类，并通过evey图像进行搜索，以便在显示之前交换高度和宽度。它不假设50％宽度最适合肖像，并且只运行一个。它使用较少的CSS。

它针对页面上的每个图像运行，但如果您为HTML中的每个图像添加相同的类名并使用getElementsByClassName（而不是getElementsByTagNname），则不会更改其他图像。通过删除for循环并在单击“下一步”按钮而不是文档就绪时运行它，可以进一步改进另一个选项。不需要HTML更改。

$(document).ready(function() {
 var el = document.getElementsByTagName("img");
 for (i = 0; i < el.length; i++) {
     if (el[i].height > el[i].width) {
     } else {
    el2 = el[i].width;
    el[i].width=el[i].height;
    el[i].height=el2;         }
 }
$('.gallery').flickity({   
// options
cellAlign: 'left',
contain: true,
setGallerySize: false
});
});

CSS

.gallery {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #000;
display: block;
}

.galleryelement {
height: 500px;
background-color: #e6e6e6;
overflow: hidden;
}

img {
 max-height: 500px;
}

JQuery的。根据img的方向更改容器宽度

3 个答案: