1

我需要根据其中的 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滑块。

4

3 回答 3

3

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

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

有了这个，我们现在有：

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

if您的病情的第二部分也必须这样做。

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

现在的if条件是

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

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

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

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

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

小提琴

于 2015-09-02T14:36:39.533 回答
0

您的 jsfiddle 仅在准备好的文档上运行 - 并且仅适用于第一个图像 - 以及 jquery 不起作用。

这是一个小提琴https://jsfiddle.net/wgqdsnmk/10/，它不需要应用新类并搜索每一个图像以在显示之前交换高度和宽度。它并不认为 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;
}
于 2015-09-02T16:03:05.697 回答
0

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%;
 }
}
于 2015-09-02T14:34:52.990 回答