手机网站中 限制图片宽度 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-- binlog事件详解
mysqlbinlog -vvv log.000001 # at # :: server id end_log_pos CRC32 sequence_number= SET @@SESSION.GTI ...
- 熟练掌握HDFS的Shell访问
HDFS设计的主要目的是对海量数据进行存储,也就是说在其上能够存储很大量文件 (可以存储TB级的文件).HDFS将这些文件分割之后,存储在不同的DataNode上, HDFS 提供了两种访问接口:Sh ...
- CCOrbitCamera卡牌翻转效果
static CCOrbitCamera* create(float t, float radius, float deltaRadius, float angleZ, float deltaAngl ...
- Android(java)学习笔记88:TextView属性大全
TextView属性大全: android:autoLink 设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接.可选值(none/web/email/ph ...
- android一些基础知识
android应用基于JAVA, 支持SQL,由于底层是LINUX,所以支持C/C++ 目前有两种编程:基于ADT的JAVA编程,基于NDK的C编程 Android编程环境需要哪些:官方推荐用JDK+ ...
- android开发之路09(浅谈SQLite数据库01)
1.SQLite数据库: SQLite 是一个开源的嵌入式关系数据库,实现自包容.零配置.支持事务的SQL数据库引擎. 其特点是高度便携.使 用方便.结构紧凑.高效.可靠. 与其他数据库管理系统不同, ...
- 实验教学管理系统 c语言程序代写源码下载
问题描述:实验室基本业务活动包括:实验室.班级信息录入.查询与删除:实验室预定等.试设计一个实验教学管理系统,将上述业务活动借助计算机系统完成. 基本要求: 1.必须存储的信息 (1)实验室信息:编号 ...
- Composer PHP 依赖管理工具
composer 是 PHP 用来管理依赖(dependency)关系的工具.你可以在自己的项目中声明所依赖的外部工具库(libraries),Composer 会帮你安装这些依赖的库文件. 依赖管理 ...
- tomcat初识
1.新工作使用tomcat,顺便就把tomcat搜了搜,看了下基础 官网:http://tomcat.apache.org/ 打开官网会发现很多版本6,7,8,9,这些版本都有什么区别呢?tomcat ...
- [改善Java代码]集合运算时使用更优雅的方式
在初中代数中,我们经常会求两个集合的并集.交集.差集等,在Java中也存在着此 类运算,那如何实现呢? 一提到此类集合操作,大部分的实现者都会说:对两个集合进行遍历,即可求出结果.是的,遍历可以实现并 ...