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

我需要根据容器中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>

我拿出一把小提琴来说明这个问题：

---

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

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%;
 }
}

“.galleryelement img”

是一个有效的选择器，但不会生成包含匹配元素的jQuery对象

修复此（

$（“.galleryelement img”）

）后，下一步是调用方法

.height（）

。如果没有括号，这将为您提供函数本身，而不是调用后的返回值

有了这些，我们现在：

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

对于

if

条件的第二部分，也必须执行相同的操作

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

if

条件现在为

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

现在我们不比较

未定义的

和

未定义的

：）
但这并没有产生预期的结果

“.galleryelement img”

返回与此选择器匹配的所有图像，但您只需要

.galleryelement

的图像。因为我们不想为同一个图像创建两次jQuery对象，所以我们将对象保存在变量中，并在

if

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

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

---

您的JSFIDLE只在文档就绪的情况下运行，并且只在第一个图像上运行，jquery也不工作

这是一个不需要应用新类的提琴，在显示之前，通过搜索每个图像来交换高度和宽度。它并不认为50%的宽度最适合纵向，只运行一个。它使用更少的CSS

它针对页面上的每个图像运行，但如果在HTML中向每个图像添加相同的类名，并使用

getElementsByClassName

（而不是

getElementsByTagNname

），则不会更改其他图像。 另一个选项可以进一步改进，方法是删除

for

循环，并在单击下一步按钮时运行它，而不是在document ready上运行它。不需要更改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
});
});  

---

请将JSFIDLE标记为包含图像NSFW！啊！：）您是否尝试过使用jquery获取宽度+高度<代码>如果（$（“.galleryelement img”）.height（）>$（“.galleryelement img”）.width（）{您可以使用

警报
或
控制台.log
来显示您当前获得的值，例如
控制台.log（.galleryelement img.height）
给出
未定义的
如果
条件与
相同，则给出
您的
（undefined>undefined）
好的，但是怎么定义呢？我试着在html中添加宽度和高度。没有改变任何东西。我的Javascript和JQuery知识不是很牢固。这实际上不是一个响应CSS问题，OP希望宽图像（横向）和高图像（纵向）一样调整大小是-目前横向图像切断了图像的右侧。它使用的Flickity插件已经响应。它只是不能很好地处理不同大小的图像。
$(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
});
});  

.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;
}