1

その中にあるimgの向きに基づいてコンテナのサイズを変更する必要があります。縦長の画像には width:50% コンテナーを、横長の画像には width:100% コンテナーを使用します。

私が思いついたJQueryは機能しません。見た目の内容に関係なく、2 つのクラスのうちの 1 つを追加するだけです。

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スライダーを使用しています。

4

3 に答える 3

3

".galleryelement img"は有効なセレクタですが、一致する要素を含む jQuery オブジェクトは得られません。

この () を修正し$(".galleryelement img")たら、次のステップはメソッドを呼び出すこと.height()です。括弧がないと、関数を呼び出した後の戻り値ではなく、関数自体が得られます。

これで、次のようになりました。

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

条件の 2 番目の部分についても同じことを行う必要がありますif。

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

if条件は次のようになります

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

今は比較undefinedしませんundefined:)
しかし、これはまだ期待される結果を生み出していません。

".galleryelement img"は、このセレクターに一致するすべての画像を返しますが、必要なのは現在 の の画像だけです.galleryelement。また、同じ画像に対して jQuery オブジェクトを 2 回作成したくないため、オブジェクトを変数に保存し、それを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

以下のコードのような 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 に答える