Rustam Bainazarov

Если вы делаете безо всякого фреймворка, у вас нет админки, где можно такие блоки создать и на выходе нужные стили будут проставляться хоть inline, хоть через какой-нибудь data-атрибут для JS… то, конечно, либо через классы к каждому блоку, либо через nth-child, либо через inline CSS.

Используя inline-метод без фреймворка, учитывайте вероятные трудности с разработкой адаптивности в случае, если нужно будет двигать фон/менять габариты и т. д.

Я такие блоки делал так: img (+ lazyload, формат JPG) и inline-стиль цвета фона обёртки, чтобы не было пустых областей ни при каких обстоятельствах. Всё это дело обрабатывалось в админке и выводилось на сайте. Можно было использовать background-image спокойно, это уже не так важно.

Если будете делать такой же гибрид (CSS-цвет + JPG с фоном), будьте аккуратны, у JPG могут быть артефакты сжатия из-за которых цвет фона может быть неоднородным, и на стыках может быть разница между картинкой и фоновым CSS-цветом. PNG предпочтительнее в данном плане, но у него есть недостаток в плане размера.

Эм, ну как — как? Чтобы сверстать некий «любой анимированный элемент» нужно его… сверстать.

Да-да, вы не ослушались, его нужно сверстать — т. е. воспользоваться HTML, CSS, JS и, если нужно, canvas.

Ну а рассказывать обо всём диапазоне технологий и их практическом применении, во-первых, никто не сможет, а во-вторых, никто не будет. У вас слишком общий вопрос.

object-fit: cover;
object-position: 50% 0 (или просто 0 0);

Высоту и ширину уже надо подгонять под ваши потребности. Либо просто высоту, либо максимальную высоту.

Либо вообще воспользоваться техникой padding-bottom: X% для обёртки картинки (которую нужно добавить), чтобы сделать сохранение пропорций по изменении ширины, а саму картинку на абсолютное позиционирование:
https://jsfiddle.net/1o5m7rwp/11/


По ссылке: обрезка по высоте + сохранение соотношения сторон картинки + обрезание нижней её части. Попробуйте сжать окно, чтобы увидеть сохранение соотношения сторон при адаптивности.

P. S. IE11 не поддерживает object-fit, но есть полифил,

Ну как бы вам сказать. Размер блоков — это одно. Их уместить в строку просто. Сложнее уместить шрифт, который не адаптивен по своей сути.

Но есть один метод:
https://css-tricks.com/snippets/css/fluid-typography/

Нужно будет скопировать сниппет, задать нужные параметры методом пробы.

LOL (!!!), у вас сайт весит 39 Мб (!!!), 130 запросов, PNG-картинки по 3 Мб, фото для фона весит 4,5 Мб... а вы спрашивайте, почему у вас сайт грузится так плохо. Ясен пень, что у вас все пустое (белый шрифт на белом фоне), пока не прогрузится хотя бы фоновый рисунок.

CSS и DOM у вас прогружаются совершенно нормально, у вас тут проблемы посерьёзнее :))

Для начала включите на сервере GZIP-сжатие, а также уменьшите картинки по габаритам в Photoshop и прогоните их всех хотя бы через это: https://tinypng.com.

Это чуть-чуть облегчит сей ад (наверное, LOL), но я уже не берусь изучать все остальные технические аспекты данного сайта... Я такого давно не видел.

https://tools.pingdom.com/#59e8fb75ecc00000

Типичная задача.

Для родителя:
display: flex;
flex-flow: column wrap; (чтобы в колонку)
justify-content: space-between; (распределяет дочерние элементы равномерно в рамках родительского блока)

А для детей нужно подбирать параметры свойств flex-grow, flex-shrink и flex-basis (например, flex: 1 0;), чтобы нужные элементы росли по высоте, заполняя пространство, а нижний элемент с ценой — нет.

Пришлите код, иначе будет сложно сказать, что куда подставить. Возможно, нужно будет разметку менять. Скорее всего, flexbox так же будет необходим на всём блоке, чтобы колонки с текстом и фото были равны по высоте.

https://jsfiddle.net/w1pzu5rh/1/.
Зоны выделил разными цветами. Верстка на коленке, но алгоритм будет понятен. Под реальности проекта нужно, конечно, подстроить (ту же минимальную высоту поставить блоку, если нужно, реальные размеры, верстку и т. п.).

Самый правильный вариант — с помощью clip-path, потому что с его помощью безо всякого вращения можно обрезать по формуле блок сверху и снизу. При этом, можно использовать значения по типу calc(100% - 50px), чтобы при изменении ширины экрана, область «скоса» всегда равнялась, как в значении выше, 50 пикселям, что упрощает совмещение нескольких таких блоков с помощью отрицательных margin'ов ( margin: -50px 0; ).

Если делать трансформации обёртки, как писали выше, то придётся на каждом отдельном разрешении следить за тем, чтобы, во-первых, между такими блоками не было зазоров, а также за тем, чтобы внутренний отступ до контента был в порядке.

Одна проблема — поддержка clip-path со стороны браузеров. Вот пример реализации такого подхода: proappliancerepair.com. У меня не стояло задачи поддерживать старые браузеры, поэтому использовал clip-path смело.

Старая особенность рендеринга градиентов в Safari, которую никак не исправят.

Дополняя ответ idexdv, можно сказать, что проще вот так:

background: linear-gradient(to right, #fff0, #fff);
/* Нуль в конце #fff0 означает полную прозрачность цвета,
и теперь градиент нормально работает в т. ч. и в Safari */