Как использовать имя css-класса как переменную?

Ankhena, спасибо за дельные советы. Но слишком много уже сделано. Переделывать с нуля - это не то, чего хотел изначально добиться для уменьшения имеющегося css.
Пока на перепутье: подключать препроцессор или пройти нотпадом+ по всем имеющимся html-файлам. Первое пока перевешивает.
Вопрос можно считать решенным

Как использовать имя css-класса как переменную?

Сергей delphinpro, придется перелопачивать все html (тысячи фото), плюс глобально править имеющиеся классы и сами дивы, потому что в них встречаются не только пары, а целые блоки картинок разных пропорций. Короче, засада еще та

Как использовать имя css-класса как переменную?

Почему Less, а не SASS?

Трудный вопрос. До сих пор хватало css, там и переменные ввели и многое из препроцессорной истории. Но вот с этим примером с пропорциями прям засада. Поэтому почитал инфы и решил, что less для данной задачи проще в освоении. Спасибо за пример, буду пробовать и вникать

Как использовать имя css-класса как переменную?

Очень интересно. Но не понял, как эти переменные затем вернуть в качестве аргументов в значения из примера: --aW1, --aH1...
Простите, но я только окунулся в less

Как использовать имя css-класса как переменную?

Картинки вписываются во флекс-блок pic вне зависимости от своих пропорций и их комбинаций. Но для этого надо подставить в формулу 4 значения для конкретной пары:

<div class="pic">
<img class="pic-43-34" src="pic01">
<img class="pic-43-34" src="pic02">
</div>

https://riggo.ru/Adventure/Test/Test.html

Как использовать имя css-класса как переменную?

Ankhena, в топике привел конкретный пример. Загвоздка в том, что фото много, пропорций много, их комбинаций много, повторений разных комбинаций тоже много. И html-файлов, где они встречаются, много. Прописывать для каждой пары картинок ручками не вариант. Пока вышел из положения прописать отдельными классами. Но выходит большая портянка, которая разрастается с каждой новой комбинацией пропорций. Хотя везде в них работает одна формула (указана в примере), и если бы подставить в нее 4 переменные из имени класса, это бы решило задачу всего одной единственной формулой. В итоге прописываем в html любую комбинацию в классе aspect-X1Y1-X2Y2, откуда данные подставляются в единую формулу.
Как еще упростить решение задачи, пока не вижу

Вывести определенный параграф the_content по его css?

Excerpt не нравится по ряду принципиальных причин. Задачи не скрыть все ненужное, а отобразить лишь один параграф по указанному классу. Мне казалось, что условие в php - самый простой из способов. Но я с php тооько начинаю осваиваться

Вывести определенный параграф the_content по его css?

А без Дом можно решить? Для меня это совсем сложно

Адаптивные картинки одной высоты?

archelon, вроде вышла конструкция. Надо еще покрутить в разных местах и вьюпортах.
У меня получилось так (попробовал в флекс-блоках):

.pic-vh {
width: auto; 
height: max-content; 
object-fit: cover; /* в данном случае без разницы contain или cover */
max-height: calc(41vw - var(--36px) - 14px)} /* подгонял под свои размеры, поля и отступы */

(нижняя пара - исходный вариант с вручную подобранным масштабом, верхняя - условно универсальный вариант с object-fit)

Адаптивные картинки одной высоты?

archelon, попробую завтра. Но конструкция кажется нежизнеспособной к исходной задаче

Адаптивные картинки одной высоты?

archelon, приведите рабочий пример. Если бы все было так просто, сеть не пестрела бы подобными вопросами и разными вариантами костылей разной степени корявости. Но увы, варианта на сегодня лично я не нашел

Адаптивные картинки одной высоты?

Да не должно ничего обрезаться. Я же четко написал "масштабироваться". Картинкам по тз задается равная высота, исходя и которой высчитывается пропорция ширин картинок.
К примеру, одна картинка имеет пропорции х/х, вторая 2х/х. Отсюда легко определить что размер общего блока 3х/х. Все величины взаимоопределяемы. Это с тз элементарной арифметики за 4-5 класс. Но как это вписать в базовые параметры css, где все завязано на ширину, а высота высчитывается вслед? Ну ведь нет в css методики "hight: 100%; width: auto", хотя с тз математики это ровно те же арифметические действия, только в основе их выступает высота. Простейшее обратное действие.
Вы знаете такое решение?

Адаптивные картинки одной высоты?

Beliyadm, не понимаю. И удивляюсь, почему данный функционал до сих пор не реализован без каких-либо костылей. Казалось бы, функция удобная и востребованная для реализации в блогах, портфолио и пр.
С точки зрения простой математики реализация функции элементарна, просто за исходную точку взята не ширина, а высота.
Ваш пример не подходит сразу по нескольким критериям: он жестко задает ширину и не масштабирует блок вместе с изображением.

Адаптивные картинки одной высоты?

"выравнивались ПО ВЫСОТЕ и пропорционально масштабировались по ширине". Что не ясно?