How can I make a picture taller on smaller screens?

Question

I want to make a picture taller the smaller the screen gets.

I currently have the following code:

<picture style="opacity:0.4">
    <source 
        type="image/webp" 
        sizes="width:100% height:10%" 
        srcset="images/background-image-200.webp 3840w 200h">
    <img 
        src="images/background-image-200.jpg" 3840w 200h
        sizes="width:100% height:10%">
</picture>

height:10% does exactly the opposite thing. It makes the image smaller on a smaller screen. What do I need to do to make it larger instead?

Answer 1

You can use media query . Here is some example

.container {
  width: 100%;
  height: 10%; /* default height */
}

@media (max-width: 500px) {
  .container {
    height: 20% /* this one will make your element taller on smaller device */
  }
}