Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

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

2025-04-05 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report