html - Is it possible to have more than one media condition in source element of picture tag?

Question

I am new to HTML5, I was learning about the picture element which lets us specify different images based on media condition but is it possible to have more than one media condition? if yes, what is the syntax for that?

<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg" style="width:auto;">
</picture>

above code works, is it possible to put a condition on min-width as well as min-height? something like this:

<picture>
  <source media="(min-height: 700px min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-height: 500px min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg" style="width:auto;">
</picture>

It doesn't work, I have looked through documentation, but can't find similar example

question from:https://stackoverflow.com/questions/65840062/is-it-possible-to-have-more-than-one-media-condition-in-source-element-of-pictur

Answer 1

There are 3 conditional operators to use multiple condition, you can use accordingly with your requirements.

1. and Specifies an AND operator
2. not Specifies a NOT operator
3. , Specifies an OR operator

<picture>
  <source media="(min-height: 700px) and (min-width: 650px)" srcset="https://via.placeholder.com/500">
  <source media="(min-height: 500px) and ( min-width: 465px)" srcset="https://via.placeholder.com/350">
  <img src="https://via.placeholder.com/100" style="width:auto;">
</picture>

Fiddle