How to resize Image <img> using css

[danielsantoso]

I want to resize img using css width:200px, but nothing happens. can you give an example to resize image using this library?

[mrTurkay]

same issue,

any solutions?

[chiaraDipiMeta]

same issue. I've also tried with "pt" and percentages, but nothing changes. Any solution?

[jkarr]

I was just able to get image sizing and scaling to work properly today. Here is how I handle images (pngs and svgs are supported in our system). I used a promise to ensure that all images were base64 for attempting the export.

1. in your html, put a canvas and an image.
   <canvas id="some-identifier"></canvas> <img style="width:300px; max-height: 100%;" src="your image" alt="some-identifier" />

2. When you click your button to export to word:
   `$("#exportQuestion").on("click", function () {
   var promises = [];
   if ($("#questionCopyDiv canvas").length > 0) {
   $("#questionCopyDiv").removeClass("hidden");

                // convert images to base64 and convert svg to png
                $("#questionCopyDiv img").each( function (i) {
                    var $image = $(this);
                    var image = this;
   
                    var promise = new Promise(function (resolve, reject) {
                        var xhr = new XMLHttpRequest();
                        xhr.open('get', $image.attr("src"));
                        xhr.responseType = 'blob';
                        xhr.onload = function () {
                            var fileReader = new FileReader();
                            fileReader.onload = function () {
                                var canvas = document.getElementById($image.attr("alt") + "-canvas");
                                var context = canvas.getContext('2d');
                                var width = image.width;
                                var height = image.height;
                                // this is the key, resize the canvas to the appropriate size
                                canvas.witdh = width; 
                                canvas.height = height;
                                // then resize the image to it's original size
                                $image.css("width", "");
                                $image.css("height", "");
                                // draw the image, starting at 0, 0, to the size of the original image.
                               // paint to the canvas at 0, 0 and scale to the desired width and heith
                                context.drawImage(image, 0, 0, image.width, image.height, 0, 0, width, height);
                               // replace the image src with the case data url and 
                               //          remove the canvas from the page 
                               $image.attr("src", canvas.toDataURL("image/png"));
                                resolve($(canvas).remove());
                            }
   
                            fileReader.readAsDataURL(xhr.response);
                        };
   
                        xhr.send();
                    });
   
                    promises.push(promise);
                });
            }
   
            if (promises.length > 0) {
                Promise.all(promises).then(function(val) {
                    exportToWord();
                });
            } else {
                exportToWord();
            }
        });
    });`
   

[coolswitch]

<img width="300" height="200" ...
this works to me