Javascript: изменить ширину изображения, сохранить пропорции, но при необходимости уменьшить высоту - PullRequest
Новая
       38

Javascript: изменить ширину изображения, сохранить пропорции, но при необходимости уменьшить высоту

0 голосов
/ 07 октября 2019

Итак, я хочу сохранить пропорции изображения, но, как сказано в заголовке, я хочу обрезать высоту, чтобы сохранить соотношение 16: 9. В настоящее время я устанавливаю изображение в качестве фона, и оно работает, но я получаю странную границу (РЕДАКТИРОВАТЬ: граница была исправлена, проверьте этот пост ниже для решения). Вы можете увидеть это на следующем скриншоте:

enter image description here

Я использую элемент изображения, потому что пользователю легче перемещать его в контентередактируемый (если я использую div, пользователь не может выбрать его и свободно перемещать).

Это код, который я использую: 

  // I get my editor width and calculate the height
  const imgWidth = parseInt(editor.offsetWidth);
  const imgHeight = imgWidth * 480 / 640;

  const img = document.createElement('img');

  // this class contains background-size: cover
  // I tried also to set border-image-widht: 0 with no luck
  img.classList.add('image');

  img.style.backgroundImage = 'url(' + image.webformatURL + ')';
  img.style.width = imgWidth + 'px';
  img.style.height = imgHeight + 'px';
  img.style.maxWidth = imgWidth + 'px';
  img.style.maxHeight = imgHeight + 'px';

Что было бы лучшеспособ изменить размер изображения обрезка лишней высоты? Почему при использовании изображения в качестве фона есть небольшая бело-серая рамкапрозрачный png для предотвращения появления границы. Есть ли лучшее решение? Сейчас я просто добавил прозрачное изображение base64 1x1 пикселей в src, и оно работает: 

img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
...