DrDoom：

私は絵のギャラリーを表示したいと思います。示す画像は、画面の向きに応じて、縦または横のいずれかであろう。写真は、その次元を除いて、同じ風景やポートレート写真です。

私はSO検索した、これまでのところ、私はこの宝石を見つけました。

@media only screen and (orientation: portrait){
.land{display: none;}
.port{display: inline-block;}
}
@media only screen and (orientation: landscape){
.land{display: inline-block;}
.port{display: none;}
}

私は、画像のいずれかの私の配列に追加したい.land、または.portapproriate画像（複数可）は、画面の向きにdepening、示されているように、それらの寸法に応じて、クラス。

私はこれをどのように行うのでしょうか？

私は、任意の追加情報を提供することができる場合、私に知らせてください。

ありがとうございました

編集：私は、これまでに示した例のための感謝みんなにしたいと思います。私は前に言及していない（と私は私が持っている必要がありますね）は、私のギャラリーは、次と前のボタンを持っていることです。画像は絶えず限り私は理解して変化し、示された画像は変更されません示す絵のクラスを変更し、それだけで、この場合に助けをしないクラスを変更します。

それとも私はここで重要な何かが足りないのですか？

でしょうが、それは、2つの配列を持っているより多くの意味をなすと向きの変化にちょうど写真が撮影された配列を変更しませんか？

それともオブジェクト、このようなものを持っています

let pictures = [
{
port: './imgs/port-pic1.jpg',
land: './imgs/land-pic1.jpg'
},{
port: './imgs/port-pic2.jpg',
land: './imgs/land-pic2.jpg'
}
]

アフマド：

あなたは、画面の幅と高さを検出することができ、そしてそのに基づいて、あなたはすべての画像を反復処理し、それらを適切なクラスを与えることができます。

let width = window.innerWidth;
let height = window.innerHeight;
let screenClass = "portrait"; // by default


if (width>height) {
    screenClass = "landscape";
}

let images = document.querySelectorAll("img");

for(let i=0; i<images.length; i++) {
  let imageClass = "port"; // by default
  let img = images[i];
  if (img.width>img.height) {
      imageClass = "land";
  }
  // combine the class for the screen orientation, plus the image 
  // orientation, for more customization

  img.className = screenClass + " " + imageClass;

}

編集します

質問の編集に基づいて、私の知る限り理解されるように、ユーザーがオブジェクトの配列に格納された画像の既存のアレイを有します。各オブジェクトには、2つのプロパティを持っている、portとland。たぶん、これらは同じ画像が、異なるモードであるか、あるいはこれらは、2つの異なるモードでの2つの異なる画像です。どんな場合でも、アレイを介して反復されることが期待されるとプロパティに格納された画像は、デバイスの向きに応じて、解析されるべきです。それはケースが何であるかである場合は、ここでそれを達成する方法です。

let pictures = [ {
                  port: './imgs/port-pic1.jpg',
                  land: './imgs/land-pic1.jpg'
                 },{
                   port: './imgs/port-pic2.jpg',
                   land: './imgs/land-pic2.jpg'
                }];

let width = window.innerWidth;
let height = window.innerHeight;
let screenClass = "port"; // by default


if (width>height) {
    screenClass = "land";
}

pictures.forEach( pic => {
   let url = pic[screenClass];  // this will either be value of land 
                                //  or  value of port
    // do whatever with the url

    let img = document.createElement("img");
    img.src = url;
    img.className = "whatever";

    document.querySelector("body").appendChild(img);

});

配列にクラスをハードコーディング

編集します

おすすめ