CODEWITHSUNDEEP
jqueryhtmlcss
MaksIngenr
MaksIngenr

Reputation: 71

How to Resize an Image in HTML

it looks for a photo in base 64 format in a link and plays it, but the problem is that the photo is too big and does not fit into the page window, how can I reduce this photo and put it in the middle ??? Here is my variant but it does not work. I would appreciate your help 

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

dont work this :

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

Upvotes: 1

Views: 71

Answers (3)

CyberDemic
CyberDemic

Reputation: 190

One thing I might try is max-width instead of width, and adding 'auto' margin to left and right if you are trying to get the image centered as well.

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

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

Upvotes: 0

ariel
ariel

Reputation: 16150

This: style="width: 500px" Won't be applied to your image, because you are creating a new element. You can define a class on css, for instance:

.myimage { width: 500px }

And apply this class to the inserted element: 

img.classList.add("myimage")

Upvotes: 1

Filip F.
Filip F.

Reputation: 164

You can use HTML width and height tags. Example:

<img id="snapshot" alt="Image" height="100px" width="100px">

Upvotes: 0

Related Questions