Изменить размер изображения в контейнере с фиксированной высотой

Question

В общем, я хочу получить изображение в виде полосы на странице (с фиксированной высотой). Теперь, если изображение слишком широкое, чтобы уместиться целиком, я хочу обрезать края с помощью "overflow: hidden" и отцентрировать его. Мне удалось это сделать, но теперь наступает момент, когда я терплю неудачу: я не хочу растягивать изображение, когда оно слишком узкое, но я хочу, чтобы оно переполняло верхнюю часть содержимого div.

Здесь вы можете увидеть пример: когда вы прокрутите вниз, вы увидите 3 изображения, и я хочу скопировать, как эти изображения ведут себя между 1200 и 1800 пикселей по горизонтали ширины области просмотра.

---

Это основная разметка, которую я имею до сих пор:

<div class="piccontainer">
    <img src="picture.jpg" class="picture"/>
</div>

.piccontainer {
    display: flex;
    justify-content: center;
    overflow: hidden;
    min-height: 20vw;
    position: relative;
}
.picture {
    height: 100%
}

Я попробовал несколько плагинов jQuery, которые не дали ожидаемых результатов, и я не мог изменить CSS, чтобы получить то, что мне нужно. Я очень расстроен, и поэтому любая помощь очень ценится!

Заранее спасибо!

Answer 1

Более элегантным решением было бы просто использовать фоновое изображение на div.

Например:

.piccontainer {
  background-image:url('/bg.png');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  height: 100vh;
}

Answer 2

Вам нужно 100%, чтобы вставить изображение? Как вы думаете, использовать изображение в качестве фона, как в:

.anyElement{
   background-image: url("yourimage.jpeg");
   background-attachment: fixed;
   background-repeat:no-repeat;
   background-size:contain;
   background-position:center;
}

Answer 3

Вы можете попробовать использовать изображение в качестве фонового изображения, а затем использовать background-size:cover; собственность на вашем изображении.

Таким образом, вы можете исправить свой содержащий элемент, и ваше изображение заполнит контейнер.

.piccontainer {
    display: flex;
    justify-content: center;
    overflow: hidden;
    min-height: 20vw;
    position: relative;
    background-image:url(picture.jpg);
    background-size:cover;
    background-position:center center;
}

Справка: Размер фона на MDN