Масштабирование дочернего холста по ширине и высоте родителей, как определено макетом, перед добавлением дочернего элемента. - PullRequest
Новая
       18

Масштабирование дочернего холста по ширине и высоте родителей, как определено макетом, перед добавлением дочернего элемента.

0 голосов
/ 24 января 2020

Минимальный пример в Codepen:

https://codepen.io/quaffpotion/pen/OJPqRgW (Зеленые прямоугольники демонстрируют ожидаемое поведение, в то время как поведение синего прямоугольника является неожиданным. Возможно, вам придется изменить размер окна браузера чтобы увидеть, что размер синей рамки не всегда будет соответствовать высоте и ширине его родителя. Я добавил отступы для демонстрационных целей) 

body {
  margin: 40px;
}
.wrapper {
		display: grid;
    grid-gap: 10px;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;
		background-color: #fff;
		color: #444;
	}

	.box {
		background-color: #444;
		color: #fff;
		border-radius: 5px;
		padding: 10px;
		font-size: 150%;

	}

.a {
  grid-column: auto / span 2;
}

.k {
  grid-column: auto / span 3;
}

.g {
  grid-column: auto / span 2;
  grid-row: auto / span 2;
}

.fillup {
  position: relative;
  height: 100%;
  /* width: 100%; This causes the child element to be too big for the parent */
  border-radius: 5px;
  
}

.blue {
  background: skyblue;
}
.green {
  background: seagreen;
}
<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b"><div class="fillup green">correctly fills parent</div></div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
  <div class="box g"><canvas class="fillup blue"></canvas></div>
  <div class="box h">H</div>
  <div class="box i"><div class="fillup green" >correctly fills parent</div></div>
  <div class="box j">J</div>
  <div class="box k">K</div>
  <div class="box l">L</div>
  <div class="box m">M</div>
</div>

Определение проблемы:

Это немного отличается от других вопросов по масштабированию, я попытаюсь сделать это хорошо определенным.

Я хочу добиться для холста того, что object-fit: fill делает с изображениями. (Масштабируется по ширине и высоте, чтобы соответствовать родительскому элементу, игнорируя соотношение сторон). Другие способы сказать это приведены ниже.

Я хочу иметь возможность добавить дочерний элемент к родительскому элементу без изменения размеров элемента. parent.

Иными словами, цель состоит в том, чтобы выполнить следующие три шага:

  1. У вас есть макет, созданный с использованием css сетки элементов div. Допустим, это включает <div> Some Text </div>, который при определенном размере окна браузера имеет размеры 200 x 100 пикселей.

  2. Вы добавляете дочерний элемент в div с шага 1. Вы добавляете некоторые стили дочерний элемент.

  3. Когда вы перезагрузите страницу и сделаете браузер того же размера, что и шаг 1, вы увидите, что дочерний элемент и родительский элемент div имеют размер 200 x 100.

Попытки решения:

  • В случае, когда дочерним элементом является div, я могу заставить его работать, однако он не работает, например, canvas element.
  • Добавление width: 100% к стилю элемента canvas создает элемент, соответствующий размеру его родительского элемента, однако не не соответствует размеру его родителя в исходном макете.
  • Благодаря другому источнику я добавил следующее частичное решение: 
var canvas = document.querySelector('canvas');
fitToContainer(canvas);
function fitToContainer(canvas){
  // Make it visually fill the positioned parent
  canvas.style.width ='100%';
  canvas.style.height='100%';
  // ...then set the internal size to match
  canvas.width  = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
}
...