手机网站中 限制图片宽度 JS图片等比例缩放
<script type="text/javascript">
$(function () {
var w = $(".content-co").width(); //容器宽度
$(".content-co 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 }); //设置缩放后的宽度和高度
}
});
}); </script>
手机网站中 限制图片宽度 JS图片等比例缩放的更多相关文章
- rem单位在手机网站中的使用
em单位是相对于父节点的font-size,会有一些组合的问题,而rem是相对于根节点(或者是html节点),也就是说你可以在html节点定义一个单独的字体大小,然后所有其他元素使用rem相对于这个字 ...
- JS实现等比例缩放图片
JS实现等比例缩放图片 2014-01-19 21:57 by 龙恩0707, 40 阅读, 0 评论, 收藏, 编辑 JS实现等比例缩放图片 有时候我们前端页面只有500×500像素的宽和高的布局, ...
- 纯JS实现图片预览与等比例缩放和居中
最近做项目时有一个需求,广告位图片上传时要预览,并且要等比例缩放和居中.已经保存的广告位图片显示时也要等比例缩放和居中.我使用了下面的代码实现,不过可能有一些小问题. <!DOCTYPE HTM ...
- 从QQ网站中提取的纯JS省市区三级联动
在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动 QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js <!DOC ...
- ios 图片处理( 1.按比例缩放 2.指定宽度按比例缩放
本文转载至 http://blog.sina.com.cn/s/blog_6f29e81f0101tat6.html //按比例缩放,size 是你要把图显示到 多大区域 CGSizeMake(300 ...
- 图片 css剪切,等比例缩放
object-fit: cover; .img1 {//自定义图片宽高,并且等比例缩放 width: 200px; height: 400px; object-fit: cover; }
- 网站中集成jquery.imgareaselect实现图片的本地预览和选择截取
imgAreaSelect 是由 Michal Wojciechowski开发的一款非常好用的jquery插件,实现了图片的截取功能.其文档和Demo也是很详尽的.大家可以到http://odynie ...
- Spring Boot中静态资源(JS, 图片)等应该放在什么位置
Spring Boot的静态资源,比如图片应该放在什么位置呢, 如果你放在传统WEB共的类似地方, 比如webapp或者WEB-INF下,你会得到一张示意文件未找到的破碎图片.那应该放哪里呢? 百度一 ...
- SharePoint 网站中定义的页面背景图片不起作用
If you are working on custom SharePoint 2013 master pages, designs and/or CSS, these little CSS clas ...
随机推荐
- mysql 面试
数据库的重要性是所有技术里最核心最需要掌握的(理解原理,并且被面试时能清晰的表达出来),直接决定运维人员薪水的高低! 所有题都要给出专业的解答方案,不是很水的那种泛泛的解答. 面试题001:什么是My ...
- 僵尸进程 图解 分布式 LINUX内核
http://blog.csdn.net/chdhust/article/details/11872467 服务器进程为何通常fork()两次
- 《RESTful Web Services》第三章 设计表述
3.1 如何使用实体头来注解表述 表述不仅仅是以某种格式序列化后的数据,它是一连串字节加上用于描述那些字节的元数据. Content-Type,用于描述表述类型.这个标头告诉接收方如何 ...
- Implementing the skip list data structure in java --reference
reference:http://www.mathcs.emory.edu/~cheung/Courses/323/Syllabus/Map/skip-list-impl.html The link ...
- Helpers\GeoCode
Helpers\GeoCode This function connects to google maps and retrieves the lat/lon of the address provi ...
- html中input type=file 改变样式
<style> #uploadImg{ font-size:12px; overflow:hidden; position:absolute} #file{ position:absolu ...
- Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片
Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在edge ...
- [改善Java代码]优先使用整型池
建议28: 优先使用整型池 看如下代码: public class Client { public static void main(String[] args) { Scanner input = ...
- Netty线程模型
一.Reactor模型 1.单线程模型 Reactor单线程模型,指的是所有的IO操作都在同一个NIO线程上面完成,NIO线程的职责如下: 1)作为NIO服务端,接收客户端的TCP连接: 2)作为NI ...
- poj 2723 2-SAT问题
思路:二分枚举能开的门的数量,将每次枚举转换成2-SAT问题.这里存在的矛盾是假设有门上a,b两个锁,a锁对应于1号钥匙,而一号钥匙的配对是2号钥匙,b锁对应于3号钥匙,3号的配对是4号钥匙.那么2号 ...