Develop Reference

Mapbox - Load an image to a certain pixel size and not a relate size?

i'm using mapbox and using the map.loadImage and I don't see a way the image I load be set a certain pixel height and width. they have "icon-size" but that scales the original size of the icon by the provided factor.

JSPDF image can't fit and to large

I have a problem with my project, and it is about converting the html file to pdf. I have one question, how can we alter the size of image in jspdf because when i'm downloading the pdf, it show that the image is not fit in the page and only show half of it for A4.then, i'm trying using the A0 size but the font will become very small even though the image is right. can some one tell how to fit the image or maybe changing the font size?
(and also i'm using HTMLfromPdf.js)

You can resize the canvas image using the method parameters,
pdf.addImage(imgData,'JPEG',0,0,canvas.width*0.2,canvas.height*0.2,"a","FAST");
You can calculate the required ratio and replace the image width and height parameters.

You can use dimensions for jsPDF directly from canvas object like described there
https://stackoverflow.com/a/65124814/9026103.

Crop images proportionally in responsive design?

So I have YouTube video thumbnails displayed on a website, but they seem to have letterboxing at the top and bottom. I need to crop this, but I can't just crop x many pixels because of the reponsive design.
How would I crop images dynamically based on their width? Would I have to do it using Javascript during resize? Or is there a simpler approach?

I had a similar issue. I solved it by drawing the image to a canvas, iterating through rows of pixels and checking if they were black. The first time a colored pixel was detected marked the edge of the letterbox. I used this information to crop the image and draw it to another canvas.
It's not a perfect solution, but it worked for me. I hope this helps.

You can use object-fit css but it's not full browser compatible, however a polyfill exist
Else you can use div with background-image and background-size with cover or contain, that have a better support

How to dynamically crop/scale images in a website

I need my site to be able to resize and crop an image based on the viewport on a browser. I've so far managed to dynamically resize it with an imagemap, but can't seem to crop it dynamically. I'd like it to crop and scale simultaneously without distorting an image. The image I'm using is 1920x1080 which is far bigger than most browsers so cropping the edges while scaling would make it appear similar on different browsers.

I use this jQuery plugin quite often. :)
http://srobbin.com/blog/jquery-plugins/jquery-backstretch/

It sounds like you can already detect the viewport size somehow. You just need the CSS or javascript to crop an image. In that case, I'd recommend this article:
http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image
You could
1) Use negative margins.
2) Absolute position the image in a smart way.
3) Use the CSS clip property.

Making resizable image backgrounds with HTML, CSS, and Javascript

I'm trying to create an image object or canvas object that will resize based on the window dimensions, but keep the aspect ratio. Is this possible?
I know that with canvas, you can maintain bicubic scaling, but is it possible to have the image scale on the window resize while maintaining the aspect ratio?

You might want to give this a shot:
http://css-tricks.com/how-to-resizeable-background-image/