缩小图片大小答案

【问题标题】：Reducing the size of the picture缩小图片大小
【发布时间】：2021-09-13 18:26:48
【问题描述】：

js中如何缩小图片的大小？

        // такой же код, что и код выше - только для черных пунктов меню типа Моноблоки 
        let categoryflag='';
            $('.submenu__title a').on('click', function (event) {
                event.preventDefault();
                console.log('Inner check');             
                categoryflag=event.target.innerHTML;
                subcategoryflag=categoryflag;
                console.log(categoryflag);
                $.ajax ({
                    method: 'POST',
                    url: '../php/ajaxsubcategory1.php',
                    cache: false,                   
                    data: {categoryflag: categoryflag, subcategoryflag: subcategoryflag},
                    dataType: 'json',
                    complete: function(data) {
                        console.log(data.header);
                        console.log(data.countrecords);
                    },
                    success: function (data) {
                        console.log('check');
                        console.log(data);
                        $('.rightmenu').html(data.result.msg);
                        let centeroutput='<div id=\"topcenterarea\">'+'<h1>'+data.result.header+' '+data.result.countrecords+' товара' + data.output[0]['screendiagonal'] + '</h1>'+'</div>';
                        
                        
                        productcardsoutput='';
                        // productcard='<div class="ProductCardBlock">';
                        
                        
                        for (let i=0; i<data.result.countrecords; i++)
                            {
                                productcard='<div class="ProductCardBlock">';
                                productcard+='<div class="ProductImage">';
                                productcard+='<img class="ProductPicture" src='+'"../images/'+data.output[i]['imagepath']+'">';
                                productcard+='</div>';
                                productcard+='</div>';
                                productcardsoutput+=productcard;
                            }
                        
                        centeroutput+=productcardsoutput;
                        
                        /*$('.centerarea').html('<div id=\"topcenterarea\">'+'<h1>'+data.header+' '+data.countrecords+' товара'+'</h1>'+'</div>');*/ 
                        $('.centerarea').html(centeroutput);

                        //expandCollapsedFunction();
                }
            }
            );
        }
        );

.ProductCardBlock {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 311px;
}

.ProductCardBlock .ProductImage {
    /*width: calc(191.5/931.75)*100%;*/
    width: 25%;
    height: 100%
    
}

.ProductCardBlock .ProductImage .ProductPicture {
    padding: auto;
}

【问题讨论】：

标签： javascript jquery image layout size

【解决方案1】：

如果您想使用 JavaScript 更改图像的大小，您可以使用： element.style.setProperty()

codepen 链接：https://codepen.io/QwertyG01/pen/NWjqjMR

HTML

<div>
 <img src="https://i.stack.imgur.com/ydOhw.jpg" class="ProductImage"></img>
</div>

var imgElement = document.getElementsByClassName("ProductImage")[0];


imgElement.style.setProperty("width", "100px");
imgElement.style.setProperty("height", "100px");

【讨论】：