时间戳

首页 > 解决方案 > 在添加子项之前将画布子项缩放到由布局确定的父项宽度和高度

css - 在添加子项之前将画布子项缩放到由布局确定的父项宽度和高度

问题描述

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图像的作用。（缩放宽度和高度以匹配父级，忽略纵横比）其他说法如下。

我希望能够在不更改父级尺寸的情况下将子元素添加到父级。

换句话说，目标是能够遵循以下三个步骤：

  1. 您有一个使用 div 元素的 css 网格创建的布局。假设这包括<div> Some Text </div>在某个浏览器窗口大小下具有 200 x 100 像素的尺寸。

  2. 您从第 1 步向 div 添加了一个子元素。您为子元素添加了一些样式。

  3. 当您重新加载页面并使浏览器具有与步骤 1 相同的大小时，您会看到子元素和父 div 的大小均为 200 x 100。

尝试的解决方案：

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;
}

标签： csscanvaslayouthtml5-canvas

解决方案

推荐阅读