Wrong image size when requesting video information

API
3

If you’re using HTML/CSS, you could use background-image on a <div> instead of using an <img src="">

let streamImg = document.createElement('div');
streamImg.classList.add('stream-img');
streamImg.style.backgroundImage = `url(${json.stream.preview.medium})`;
// Where container is wherever you wish to put it
container.appendChild(streamImg);

or

let streamImg = `<div class="stream-img" style="background-image: url(${json.stream.preview.medium})"></div>`;
// Where container is wherever you wish to put it
container.innerHTML += streamImg;

The result should be like this:

<div class="stream-img" style="background-image: url(https://static-cdn.jtvnw.net/previews-ttv/...)"></div>

And then the CSS:

.stream-img {
    width: 320px;
    height: 180px;
    background-size: cover;
    background-image: url(/img/default_stream_img.png);
}

This will result in stretching the image proportionally to cover the whole area. (Acting like a crop)

1 Like