Уменьшите <canvas>в контейнере сетки так, чтобы <canvas>сохранил свое соотношение сторон - PullRequest
Новая
       33

Уменьшите <canvas>в контейнере сетки так, чтобы <canvas>сохранил свое соотношение сторон

0 голосов
/ 09 июня 2019

У меня проблема с уменьшением canvas элементов, которые принадлежат grid контейнеру. 

html * {
 font-size: 1em;
 font-family: Arial;
}

#wrapper {
 border: 1px solid green;
 display: grid;
 grid-template-columns: repeat(auto-fit, 32vmin);
 grid-auto-rows: minmax(32vmin, 43vmin);
 grid-column-gap: 0.4em;
 grid-row-gap: 0.4em;
 align-items: center;
 justify-items: center;
}

#wrapper > * {
 object-fit: contain;
 max-height: 32vmin;
 max-width: 32vmin;
 border: 1px solid black;
}

#canvas0 {
 width:20vmin;
 height:60vmin;
}
<html>
<body>
 <div id="wrapper">
  <canvas id="canvas0"></canvas>
 </div>
</body>
</html>

Приведенный выше код показывает canvas с width: 20 и height: 60, масштабированными с соотношением сторон результата 1:2.Мне нужен элемент canvas, который вписывается в максимальную grid высоту строки и ширину столбца и остается постоянным с его соотношением сторон.

1 Ответ

0 голосов
/ 16 июня 2019

Я придумал решение, которое использует Javascript. На мой взгляд, элементы canvas должны иметь свои собственные атрибуты width и height, которые отличаются от атрибутов CSS. Холст width и height - это размеры, используемые для рисования на холсте. CSS width и height представляют расположение элементов.

CSS плюс HTML макет практически не отличается от исходного вопроса. Несколько изменений здесь и там, но в целом то же самое. После этого я устанавливаю width и height для каждого элемента canvas в Javascript, получая размеры и пропорции с сервера. Затем я масштабирую canvas элементов в соответствии с соотношением сторон.

Этот ТАК ответ и вопрос помогли мне решить проблему масштабирования.

Как мне масштабировать один прямоугольник до максимально возможного размера внутри другого прямоугольника?

...