用 jQuery实现图片等比例缩放大小
原文:http://www.open-open.com/code/view/1420975773093
<script type="text/javascript">
window.onload = function() {
var w = 500;//设置最大宽度,也可根据img的外部容器 而动态获得,比如:$("#demo").width();
$("img").each(function() {//如果有很多图片,使用each()遍历
var img_w = $(this).width();//图片宽度
var img_h = $(this).height();//图片高度
if (img_w > w) {//如果图片宽度超出指定最大宽度
var height = (w * img_h) / img_w; //高度等比缩放
$(this).css( {
"width" : w,"height" : height
});//设置缩放后的宽度和高度
}
}); }
$(document).ready(function() {
//就本例而言 不要用 jQuery中的ready 你懂的...
})
</script>
用 jQuery实现图片等比例缩放大小的更多相关文章
- C#图片按比例缩放
C#图片按比例缩放: // 按比例缩放图片 public Image ZoomPicture(Image SourceImage, int TargetWidth, int TargetHeight) ...
- 理解CSS3中的background-size(对响应性图片等比例缩放)
理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...
- css 如何实现图片等比例缩放
在进行布局的时候,很多PM都要求图片等比例缩放,而且要求图片不失真,不变形,但是UI设计好了这个div的宽度又不能随意更改,而后台传过来的图片也不是等比例的图片,这就比较难受了,写成 width: 1 ...
- CSS让DIV按照背景图片的比例缩放,并让背景图片填充整个元素(转)
目的是:通过background的一系列属性,让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV 首先我们需要让背景图片在指定的DIV中全部填充显示 之前看有用类似 background-at ...
- 让ie6也支持max-width,和max-height实现图片等比例缩放
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- (转载)让ie6也支持max-width,和max-height实现图片等比例缩放
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【转】微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应
原文[https://blog.csdn.net/qq_31383345/article/details/53127804] 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于 ...
- 微信小程序学习点滴《十二》:图片等比例缩放 获取屏幕尺寸图片尺寸 自适应
原文:http://www.wxapp-union.com/portal.php?mod=view&aid=360 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于屏 ...
- css技术之用最高和最宽的限制“max-height和max-width”做图片同比例缩放,达到图片不变形目的,做出批量打印图片功能,页面打印“window.print()”
一.简介 他们是为流而生的,像width/height这种定死的砖头式布局,min-width/max-width就没有存在的意义 ,min-width/max-width一定是自适应布局或流体布局中 ...
随机推荐
- html5/css3响应式页面开发总结
一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...
- 【线段树】uoj#228. 基础数据结构练习题
get到了标记永久化 sylvia 是一个热爱学习的女孩子,今天她想要学习数据结构技巧. 在看了一些博客学了一些姿势后,她想要找一些数据结构题来练练手.于是她的好朋友九条可怜酱给她出了一道题. 给出一 ...
- 如何用DOM 元素就能画出国宝熊猫
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odKrpy 可交互视频教 ...
- 前端Web框架的实现过程
一.Web框架的本质: 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. 半成品自定义web框架 i ...
- ZZULIoj 1907 小火山的宝藏收益
Description 进去宝藏后, 小火山发现宝藏有N个房间,且这n个房间通过N-1道门联通. 每一个房间都有一个价值为Ai的宝藏, 但是每一个房间也都存在一个机关.如果小火山取走了这 ...
- PAT Basic 1044
1044 火星数字 火星人是以 13 进制计数的: 地球人的 0 被火星人称为 tret. 地球人数字 1 到 12 的火星文分别为:jan, feb, mar, apr, may, jun, jly ...
- RHEL6.5上升级OpenSSH7.4p1
由于升级OpenSSH涉及到安全性问题,为保险起见,在升级前最好安装telnet服务作为备用方案,然后在升级成功后再停止telnet即可. 一.OpenSSH升级相关源码包下载地址 zlib htt ...
- Java-对复合类型数据进行排序
Array.sort(arr)可以进行简单的排序,如果需要复杂的排序可以实现Comparable package com.tj; import java.util.Arrays; public cla ...
- sql server 2008启动时:已成功与服务器建立连接,但是在登录过程中发生错误。(provider:命名管道提供程序,error:0-管道的另一端上无任何进程。)(Microsoft SQL Server,错误:233) 然后再连接:错误:18456
问题:sql server 2008启动时:已成功与服务器建立连接,但是在登录过程中发生错误.(provider:命名管道提供程序,error:0-管道的另一端上无任何进程.)(Microsoft S ...
- sqoop导数据出现问题
执行下面命令的时候报错 ./sqoop import \ --connect jdbc:mysql://mini1:3306/userdb \ --username root \ --password ...