js控制图片自动缩放，实现铺满盒子，不变形，完全局中

最新推荐文章于 2024-10-09 08:55:16 发布
最新推荐文章于 2024-10-09 08:55:16 发布
阅读量2k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/n9nzjx57bf/article/details/72457664
版权
该博客介绍了如何使用JavaScript控制图片自动缩放以适应盒子尺寸，同时保持图片原始比例且完美居中。通过判断图片与盒子的高度和宽度比例，调整图片的缩放和定位，确保图片在任何情况下都能填充盒子且不发生变形。
摘要由CSDN通过智能技术生成 
此js一般用于控制图片铺满盒子，但是比例不变，并且绝对局中
原理：判断图片的高宽与盒子高宽的大小的关系，然后通过比例来控制图片的缩放及定位


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#img{
   width:600px; height:400px; position:relative; overflow:hidden; back
最低0.47元/天 解锁文章
n9nzjx57bf
关注
JS自动缩放页面图片
暖心欧巴丶的博客
02-18 522
注：该方法不适用于图片较多的页面！ /** * 缩略图 * * @param bool isScaling 是否缩放 * @param int width 宽度 * @param int height 高度 * @param string loadindPic 表示“正在加载中”的图片地址 */ jQuery.fn.LoadImage = function (isScaling,
原生JS写轮播图（理解原理）
weixin_41865901的博客
12-31 814
轮播图一般用框架是很少代码就可以完成的。那么用原生js是怎么写的呢？ 首先轮播的图片是在ul里的li标签里。 1.获取ul元素，因为切换图片的时候，让整个ul向左移动一个图片的长度 var bigBobj = my$("box"); var fdivobj = bigBobj.children[0]; var ulobj = fdivobj.children[0]; var spanobjs = fdivobj.children[1].children; 2.然后为每个切换图片的
js按比例缩放图片，不变形，不失真
10-04
图片如果直接限制其高度或宽度，就会使图片变形，失真 这里提供按比例缩放图片解决的这个问题 js文件很小，只有0.5KB 但是这个还有其他方法，就是上传的时候按比例生产缩略图
前端vue中div设置background图片铺满div
最新发布
susu1083018911的博客
10-09 771
前端vue中div设置background图片铺满div
js实现图片的等比例缩放
weixin_33774615的博客
03-06 1959
  js实现图片的等比例缩放 CreateTime--2018年3月6日14:04:18 Author:Marydon 1.代码展示 /** * 图片按宽高比例进行自动缩放 * @param ImgObj * 缩放图片源对象 * @param maxWidth * 允许缩放的最大宽度 * @param maxHeight * 允...
js自动缩放
aoyin1017的博客
08-16 125
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js自动缩放</title> 6 </head> 7 <script> 8 ...
js实现鼠标滚轮控制图片缩放效果的方法
10-24
在如今的网络应用中，经常会遇到需要实现用户通过鼠标滚轮控制页面元素缩放的场景，例如图片查看器、地图应用等。本文将详细介绍如何使用JavaScript来实现通过鼠标滚轮控制图片缩放效果的方法，其中将涉及...
js实现固定显示区域内自动缩放图片的方法
10-23
在本文中，我们将深入探讨如何使用JavaScript实现固定显示区域内自动缩放图片的功能，这对于网页设计和用户体验优化至关重要。 首先，我们要明确目标：在固定大小的容器（例如一个`<div>`）内，使图片保持原始比例...
关于css控制图片大小不变形的实现思路
09-25
在处理Web页面中的图片元素时，常常会遇到需要控制图片大小以适应页面布局的需求。在使用CSS控制图片大小...通过上述方法，前端开发者可以灵活地控制网页中图片的尺寸而不失真，最终达到良好的页面布局和用户体验效果。
JavaScript实现加载不同尺寸图片自适应统一尺寸容器，且图片不变形
05-09
JavaScript实现加载不同尺寸图片自适应统一尺寸容器。针对不同尺寸的图片需要统一展示在一个规定尺寸的容器里，且不变形。兼容所有主流浏览器。
js自动缩放页面，html自动缩放页面，大屏自动缩放页面，数字看板自动缩放页面，大数据看板自动缩放页面
橙-极纪元-cplvfx-JJY.Cheng
04-19 636
js自动缩放页面，html自动缩放页面，大屏自动缩放页面，数字看板自动缩放页面，大数据看板自动缩放页面
在asp中实现自动缩放图片（推荐）
weixin_34406796的博客
01-05 220
自动实现图片的缩放js代码： function scalePhoto(imgId,width,height){ var img = document.getElementById(imgId); if(img != null){  var imgWidth = img.width;  var imgHeight = img.height;   if(imgWidth&gt;width&amp...
js图片不变形缩略图
java 帝国
11-27 349
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &l
js jquery 处理图片不变形 图片加载完成
taking_wang的专栏
08-04 1683
/**  * 设置显示比例大小  * @param imgObj img juqery对象  */ function setImgSize(imgObj){          var img= $(imgObj)[0];    //JQUERY 对象 转成DOM对象     if(!img.complete){         if(img.addEventListener){  
JS实现等比例缩放图片
weixin_42599560的博客
01-09 2417
JS实现等比例缩放图片 有时候我们前端页面只有500×500像素的宽和高的布局，但是后台返回的数据图片是1000×1000，那么这种情况下 如果我直接返回的话 那么图片肯定有一部分没有显示出来，在这种情况下我是想能不能在我们前端开发实现图片等比例缩放。比如如下HTML代码： <div id="demo1"> <img src="http://img01.taobao...
利用javascript实现图片等比例缩放
9年.NET撸码员，月薪5K
10-10 446
下面方法可以实现等比例缩放： 1． 把Image的Width和Height属性删除。 2.　把下面js代码复制在Image[color=red]后面[/color]（注意：这里假设你的Image名称叫“Image1”如果不同请把它改过来，图片按等比例缩放成200×200）。 [code="js"] function DrawImage() { var FitWidth = ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值