Уравнения CSS для расчета ширины миниатюры ⇐ CSS

[Anonymous]

Я хочу, чтобы раздел страницы показал три миниатюры 16x9 видео, расположенные с большой миниатюрой слева и двумя меньшими миниатюрами справа. Я хочу, чтобы «столбец», содержащий две маленькие миниатюры, соответствовали высоте большой миниатюры, поэтому мне нужно рассчитать правильную ширину миниатюры. < /P>
Эта диаграмма иллюстрирует, чего я хочу достичь. Известными факторами являются общая ширина (𝑤) макета и желаемый разрыв (𝑧) между миниатюрами. The unknown factors, which I need to calculate, are the width of the large image (𝑥) and the width of the smaller images (𝑦).


Here is an implementation which approximates what I want to do. < /p>

Код: Выделить всё

body {
margin: 0;
text-align: justify;
}
main {
margin: 1em max(1em, 10vw);
container-type: inline-size;
}
.videos {
--gap: 20px;
--x: 64cqw;
--y: 30cqw;
display: flex;
gap: var(--gap);
align-items: start;
.right-column {
display: flex;
flex-direction: column;
gap: var(--gap);
}
}
#v1, #v2, #v3 {
aspect-ratio: 16/9;
background: green;
}
#v1 {
width: var(--x);
flex-shrink: 0;
}
#v2, #v3 {
width: var(--y);
}< /code>


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus. Duis varius risus congue velit faucibus, sed interdum purus consectetur.

Cras volutpat velit non mi sagittis condimentum. Cras tempor aliquet turpis sed pretium. Nunc aliquet sodales turpis quis ultrices. Duis auctor accumsan enim, quis maximus ex malesuada a. Donec a felis ut erat tempus euismod non vel neque. Proin lectus massa, sagittis at imperdiet nec, consequat ut neque. Sed vel placerat neque, vel varius urna. Vivamus interdum euismod urna a accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.









Nulla rhoncus aliquam mauris, eu pretium dolor auctor in. Maecenas a sollicitudin dolor, eget commodo quam. Proin et dui sed ligula vulputate egestas. Quisque eget augue vitae purus placerat pharetra. Aliquam rhoncus convallis lorem, sed facilisis odio blandit scelerisque. Vivamus viverra urna ac nulla interdum, eget ullamcorper leo maximus. Mauris nec feugiat enim. Nam congue, dui sit amet vestibulum posuere, leo mauris fermentum lorem, eget bibendum velit nunc quis leo.

Curabitur eget ullamcorper justo, sit amet dictum neque. Fusce vitae ligula et felis auctor vulputate vel suscipit nibh. Integer a felis varius purus vestibulum viverra. Morbi venenatis placerat augue sit amet commodo. Sed dapibus molestie eros, vitae ultrices nunc commodo aliquam. Vivamus tempus mollis massa vel egestas. Donec ut ante quis eros commodo volutpat. Proin sem nisi, viverra ac sem tristique, consectetur laoreet sapien. Vivamus suscipit orci vel euismod scelerisque. Nullam sed pulvinar tellus. Nullam pulvinar arcu eget nibh rutrum, eget faucibus ligula ullamcorper.

< /code>
< /div>
< /div>
< /p>
В этой реализации я настраиваю 𝑥 и 𝑦 на простые проценты ширины контейнера. Это примерно то, что я хочу, но я хочу, чтобы это было Pixel Perfect, и я хочу иметь возможность изменить разрыв (𝑧 𝑧), не нарушая макет. Чтобы завершить макет, как я могу разработать точные объявления css calc () 

для определения 𝑥 и 𝑦?

Подробнее здесь: https://stackoverflow.com/questions/797 ... ail-widths