How to use layui to enlarge or reduce a picture in equal proportion

This article mainly explains "how to use layui to enlarge or shrink pictures in equal proportion". The content in the article is simple and clear, and it is easy to learn and understand. below, please follow the editor's ideas slowly and deeply, together to study and learn "how to use layui to enlarge or shrink pictures in equal proportion"!

HTML

JS

("# photo") .click (function () {showImg ($(this));}); function showImg (imgData) {var img = new Image (); img.src = imgData.attr ("src"); var height = img.height; / / original image size var width = img.width; / / original picture size var winHeight = $(window). Height ()-80 / / the height of the visual part of the browser var winWidth = $(window). Width ()-100; / / the width of the visual part of the browser / / if the height or width of the picture is greater than the limited height or width, then compress the if (height > winHeight | | width > winWidth) {/ / 1. The width-height ratio of the original picture is greater than or equal to the picture frame width-height ratio if (winWidth/ winHeight width / height) {width = winHeight * (width / height); height = winHeight; / / taking the height of the frame as the standard}} var imgHtml = "

" / / pop-up layer layer.open ({type: 1, shade: 0.8, offset: 'auto', / / area: [500 +' px',550+'px'], area: [width + 'px', (height + 50) +' px'], / / the original image shows that the height + 50 is to remove the scroll bar shadeClose:true Scrollbar: false, title: "Picture Preview", / / do not display the title content: imgHtml, / / captured elements Note: it is best to store the specified element in the outermost layer of body, otherwise it may be affected by other relative elements: cancel: function () {/ / layer.msg ('capture is wrapping the structure of layer from elements that already exist on the page', {time: 5000, icon: 6}) Thank you for your reading, the above is the content of "how to use layui to enlarge or reduce pictures in equal proportions". After the study of this article, I believe you have a deeper understanding of how to use layui to enlarge or reduce pictures in such proportions, and the specific use still needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!