Question

我使用即时创建的图像来保持具有固定高度的盒子的长宽比。将图像源设置为具有给定宽度和高度的画布提供的数据URL，然后将图像附加到div，div可以包含任何内容，具有任何高度，并且仍保持固定的宽高比。

这很好用，但是，在内存较少的速度较慢的手机上，页面上的大量数据URL可能会开始有些拖累。无法将某些比率降低到特定点以下，从而导致相对较大的画布。

是否可以设置img元素的比例而不设置其来源？是否可以将其设置为只有宽度和高度的真正空图像的格式？？

编辑：以下代码段引发错误-iframe限制，可能与制作图像有关。您可以在this CodePen上看到没有错误的版本。

const wrapper = document.querySelector(".wrapper");

function addRatioBox(width, height = 1) {
	const cvs = document.createElement("canvas");
	
	const img = new Image(width, height);
	const box = document.createElement("div");
	
	cvs.width = width;
	cvs.height = height;
	
	img.src = cvs.toDataURL("image/png");
	
	box.appendChild(img);
	box.className = "ratioBox";
	
	wrapper.appendChild(box);
}

addRatioBox(1);
addRatioBox(4, 3);
addRatioBox(16, 9);
addRatioBox(2, 1);

.ratioBox {
  background: orange;
  display: inline-block;
  height: 100%;
  margin-right: 10px;
}

.ratioBox img {
  height: 100%;
  width: auto;
  display: block;
}




/* just a whole bunch of stuff to make things prettier from here on down */

.wrapper {
  background: #556;
  padding: 10px;
  position: absolute;
  height: 20%;
  top: 50%;
  left: 50%;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

body {
  background: #334;
}

.ratioBox:last-of-type {
  margin-right: 0;
}

<div class="wrapper"></div>

设置没有src的图像的宽高比

0 个答案: