Как сделать адаптивную картину, чтобы ее поведение при адаптиве было не стандартным

Question

Что я имед ввиду под нестандартным поведенеием. Если, к примеру, сделать картинку на 100% ширину и высоты, то при object-fit: cover картинка постарается "покрыть блок", т.е, если он там не поместится контент картинки может обрезать так, чтобы пропорции сохранились. Это стандарт.

Я хочу попробовать сделать вот так. Предположим у меня есть широкая картинка 1000x100 пикселей. На левом крае картинки нарисован кот, а на правом крае собака. Я хочу, чтобы когда ширина контейнера картинки уменьшалась, собака и кот приблизились к друг другу, а не просто обрезались. Как это можно сделать?

Answer 1

Для данного случая, в виду простоты картинки, думаю, что подойдёт такой вариант (измените размер блока, ухватив его за правый нижний угол):

.picture {
  position: relative; margin: 0 auto;
  width: 100%; max-width: 1000px; height: 100px;
  overflow: hidden; resize: horizontal;
  box-shadow: 0 0 0 1px #000;
  background-image: url(https://i.stack.imgur.com/03cri.jpg);
  background-position: 50% 0; background-repeat: no-repeat;
}
.picture::before,
.picture::after {
  content: "";
  position: absolute;
  height: inherit; width: 50%;
  overflow: hidden;
  background-image: inherit;
  background-repeat: no-repeat;
}
.picture::before {
  left: 0; background-position: 0% 0;
  -webkit-mask-image: linear-gradient(to right, #000f, #0000);
  mask-image: linear-gradient(to right, #000f, #0000);
}
.picture::after {
  right: 0; background-position: 100% 0;
  -webkit-mask-image: linear-gradient(to left, #000f, #0000);
  mask-image: linear-gradient(to left, #000f, #0000);
}

<div class="picture"></div>

Очень много зависит от картинки - вот пример чуть интереснее:

.picture {
  position: relative; margin: 0 auto;
  width: 100%; max-width: 1200px; height: 627px;
  overflow: hidden; resize: horizontal;
  box-shadow: 0 0 0 1px #000;
  background-image: url(https://pbs.twimg.com/media/Dm-ob6nW4AIdZyz.jpg:large);
  background-position: 50% 0; background-repeat: no-repeat;
}
.picture::before,
.picture::after {
  content: "";
  position: absolute;
  height: inherit; width: 50%;
  overflow: hidden;
  background-image: inherit;
  background-repeat: no-repeat;
}
.picture::before {
  left: 0; background-position: 0% 0;
  -webkit-mask-image: linear-gradient(to right, #000f 80%, #0000);
  mask-image: linear-gradient(to right, #000f 80%, #0008);
}
.picture::after {
  right: 0; background-position: 100% 0;
  -webkit-mask-image: linear-gradient(to left, #000f 80%, #0000);
  mask-image: linear-gradient(to left, #000f 80%, #0000);
}

<div class="picture"></div>

БЛОГ НА HUSL

Как сделать адаптивную картину, чтобы ее поведение при адаптиве было не стандартным

Ответы (1 шт):