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

Question

我需要根据容器中 img 的方向调整容器的大小。以便为纵向图像提供 width:50% 的容器，为横向图像提供 width: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%;
}

我制作了一个Fiddle来说明问题：JSFiddle

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

Answer 1

也许你可以像下面的代码一样使用 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 2

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

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

现在有了这个：

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

您的 if 条件的第二部分也必须这样做。

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

if 条件现在为

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

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

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

中使用它

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

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

fiddle

Answer 3

您的 jsfiddle 仅在文档就绪时运行 - 并且仅针对第一张图像 - 以及 jquery 不工作。

这是一个 fiddle https://jsfiddle.net/wgqdsnmk/10/，不需要应用新的 class 并搜索每张图片以在显示之前交换高度和宽度。它不假设 50% 的宽度最适合纵向，并且只运行一个。它使用较少 CSS。

它针对页面上的每个图像运行，但是如果您为 HTML 中的每个图像添加相同的 class 名称并使用 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 的方向更改容器宽度

JQuery. Change container width based on orientation of img within

jquery

addclass

gallery

orientation

flickity