Масштаб преобразования CSS на основе ширины контейнера

Question

Я хочу отобразить iframe с фиксированным размером 1440px, но масштабировать его в контейнер на моей странице. Я могу заставить его работать с фиксированным номером, например

.scaled {
  width: 1440px;
  transform: scale(0.5);
  transform-origin: 0,0;
}

Однако возможно масштабировать это так, чтобы оно соответствовало его родительскому контейнеру, где контейнер имеет процентную ширину, например

<div class="row">
   <div class="column"> 
        .... some content
   </div>

   <div class="column">
       <iframe src="...blah" class="scaled" />
   </div>
</div>

РЕДАКТИРОВАТЬ: Дальнейшее описание

Таким образом, идеальный результат здесь - 50% столбца, где ширина строки может варьироваться в зависимости от области просмотра, например 900px, 1440px и т. Д. *

Однако я хочу, чтобы iframe занимал всю ширину столбца и отображал его так, как если бы он был в окне просмотра размером 1440 пикселей. (Отсюда ширина 1440px и масштабное преобразование)

К сожалению, это недопустимый код, поскольку вы не можете делить на длину в пикселях, но что-то вроде этого:

.scaled-proportion {
    width: 1440px;
    transform: scale(calc(100% / 1440px));
    transform-origin: 0,0;
}

Answer 1

Как вы можете прочитать из MDN Web Docs , а также выяснили сами,

[В делении calc()] Правая сторона должна быть .

К сожалению, это означает, что эту функцию нельзя использовать с двумя значениями px / %.
calc (), вероятно, была нашей единственной альтернативой JavaScript, и в отсутствие этого нам придется использовать именно это.

Вы можете прочитать полное руководство по CSS-Tricks , или вы можете увидеть предоставленный ими рабочий пример здесь .