potraitとlandscape画像に基づいて画像のCSSの幅を変更する方法

Question

画像が縦または正方形の向きであれば幅を100％にし、画像が入っている場合は横にする必要があります横向き。

Answer 1

あなたは、これはあなたを助けるかもしれない。この

@media (orientation: landscape) { 
    img { 
    width: auto; 
    } 
} 

@media (orientation: portrait) { 
    img { 
    width: 100%; 
    } 
} 

希望のメディアクエリを使用することができます。

DEMO

@media (orientation: landscape) { 
 
    img { 
 
    width: auto; 
 
    } 
 
} 
 

 
@media (orientation: portrait) { 
 
    img { 
 
    width: 100%; 
 
    } 
 
}

<img src="https://static.pexels.com/photos/371633/pexels-photo-371633.jpeg">