Excerpt не нравится по ряду принципиальных причин. Задачи не скрыть все ненужное, а отобразить лишь один параграф по указанному классу. Мне казалось, что условие в php - самый простой из способов. Но я с php тооько начинаю осваиваться
archelon, вроде вышла конструкция. Надо еще покрутить в разных местах и вьюпортах.
У меня получилось так (попробовал в флекс-блоках):
.pic-vh {
width: auto;
height: max-content;
object-fit: cover; /* в данном случае без разницы contain или cover */
max-height: calc(41vw - var(--36px) - 14px)} /* подгонял под свои размеры, поля и отступы */
(нижняя пара - исходный вариант с вручную подобранным масштабом, верхняя - условно универсальный вариант с object-fit)
archelon, приведите рабочий пример. Если бы все было так просто, сеть не пестрела бы подобными вопросами и разными вариантами костылей разной степени корявости. Но увы, варианта на сегодня лично я не нашел
Да не должно ничего обрезаться. Я же четко написал "масштабироваться". Картинкам по тз задается равная высота, исходя и которой высчитывается пропорция ширин картинок.
К примеру, одна картинка имеет пропорции х/х, вторая 2х/х. Отсюда легко определить что размер общего блока 3х/х. Все величины взаимоопределяемы. Это с тз элементарной арифметики за 4-5 класс. Но как это вписать в базовые параметры css, где все завязано на ширину, а высота высчитывается вслед? Ну ведь нет в css методики "hight: 100%; width: auto", хотя с тз математики это ровно те же арифметические действия, только в основе их выступает высота. Простейшее обратное действие.
Вы знаете такое решение?
Beliyadm, не понимаю. И удивляюсь, почему данный функционал до сих пор не реализован без каких-либо костылей. Казалось бы, функция удобная и востребованная для реализации в блогах, портфолио и пр.
С точки зрения простой математики реализация функции элементарна, просто за исходную точку взята не ширина, а высота.
Ваш пример не подходит сразу по нескольким критериям: он жестко задает ширину и не масштабирует блок вместе с изображением.
