Как я могу сделать картинку выше на маленьких экранах?

Question

Я хочу сделать изображение тем выше, чем меньше экран.

В настоящее время у меня есть следующий код:

<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% делает прямо противоположное. Это делает изображение меньше на меньшем экране. Что мне нужно сделать, чтобы увеличить его?

Answer 1

Вы можете использовать медиа-запрос . Вот пример

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

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