Как изменить размер изображения в HTML - PullRequest
Новая
       0

Как изменить размер изображения в HTML

1 голос
/ 25 марта 2020

он ищет фотографию в формате base 64 по ссылке и воспроизводит ее, но проблема в том, что фотография слишком большая и не помещается в окно страницы, как я могу уменьшить эту фотографию и поместить ее в середину ??? Вот мой вариант, но он не работает. Буду признателен за вашу помощь 

<html>
 <head>
 <script>

$(document).ready(function(){
  var host = 'myURL';
  var res  = '/getPhoto?id_document=';
  var id_doc = '1111');
fetch(host+res+id_doc)
.then(response => response.json())
.then(data => {
    var ele = document.createElement("span");
    var img = document.createElement("img");
    img.setAttribute("src", "data:image/png;base64,"+data.snapshot);
    ele.appendChild(img);
    var elem=document.getElementById('snapshot').appendChild(ele);
})
.catch(err => console.error(err));
});
 </script>
</head>
<body>
<div id="snapshot">
    <img id="snapshot" alt="Image" style="width: 500px">
</div>
</body>
</html>

не работает: 

  <img id="snapshot" alt="Image" style="width: 500px">

Ответы [ 3 ]

1 голос
/ 25 марта 2020

Это: style="width: 500px" Не будет применено к вашему изображению, потому что вы создаете новый элемент. Вы можете определить класс на css, например: 

.myimage { width: 500px }

И применить этот класс к вставленному элементу: 

img.classList.add("myimage")
0 голосов
/ 25 марта 2020

Одна вещь, которую я мог бы попробовать - это максимальная ширина вместо ширины и добавление поля 'auto' слева и справа, если вы пытаетесь также центрировать изображение. 

.snapshot {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

<img id="snapshot" alt="Image" class="snapshot">

0 голосов
/ 25 марта 2020

Вы можете использовать HTML метки ширины и высоты. Пример: 

<img id="snapshot" alt="Image" height="100px" width="100px">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...