CODEWITHSUNDEEP
htmlcss
Shiva Balaji Anumakonda
Shiva Balaji Anumakonda

Reputation: 11

How to change width of image css on the basis of portrait and landscape image

Implemented a logo in the box, where width should be 100% if the image is in portrait or square orientation and width should be auto if the image is in landscape orientation.

Upvotes: 0

Views: 1583

Answers (1)

Satheesh Kumar
Satheesh Kumar

Reputation: 2293

You can use media queries for this

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

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

Hope this may help you.

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">

Upvotes: 1

Related Questions