Установить соотношение сторон изображения без src - PullRequest
Новая
       6

Установить соотношение сторон изображения без src

0 голосов
/ 03 октября 2018

Я использую изображения, созданные на лету, чтобы поддерживать пропорции блоков с фиксированной высотой.Источники изображений задаются в виде URL-адресов данных, предоставленных с холста с заданной шириной и высотой, затем изображения прикрепляются к элементам div, которые могут содержать любой контент, иметь любую высоту и при этом сохранять фиксированное соотношение сторон.

Это работает хорошо, однако, на более медленных телефонах с меньшим объемом памяти большое количество URL-адресов на странице может начать немного тормозить.Некоторые из соотношений не могут быть уменьшены ниже определенной точки, что приводит к относительно большим холстам.

Есть ли способ установить соотношение элемента img без указания его источника? Есть лиЛюбой способ установить исходный формат в формате, который является действительно пустым изображением только с шириной и высотой?

РЕДАКТИРОВАТЬ: Фрагмент ниже выдает ошибку - ограничения iframe, вероятно, связанные с созданием изображений.Вы можете увидеть безошибочную версию на этой 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>
...