手机网站中 限制图片宽度 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 ...
随机推荐
- win7系统激活最简单方法
利用激活工具快速激活WIN7系统! 工具/原料 小马Oem7.未激活的WIN7系统 步骤/方法 1 复制BT种子 http://www.pccppc.com/download/oem7F.rar粘贴到 ...
- 使用Loadrunner进行接口测试
在工作中很多时候都需要进行接口测试,如果只是进行接口的功能测试这个很简单,两种类型: 1.如果是基于get的直接使用浏览器进行访问,查看服务器返回的数据是否正确就行, 2.如果是基于post的可以接触 ...
- 视频-某hadoop高级应用-搜索提示
看了北风的免费视频,只有一个案例,苦逼买不起几百上千的视频教程 先搭建简单的web项目,基于struts,使用到了bootstrap. 界面: web.xml <filter> <f ...
- C# 之 获取服务器IP,客户端IP以及其它
1.获取客户端IP:Request.ServerVariables.Get("Remote_Addr").ToString(); 2.获取客户端主机名:Request.Server ...
- JavaFX(三)窗口拖动
1.问题场景 在上一篇中,我们将窗口的默认标题栏隐藏从而导致鼠标点击窗体无法进行拖动. 2.解决思路 给组件添加鼠标按下事件监听器和鼠标拖动事件监听器. 3.代码实现 代码片段: private do ...
- 使用NumberPicker定制自己喜欢的Date&TimePicker
1.NumberPicker简介: NumberPicker是Android3.0之后引入的一个控件,主要功能是用于选择一组预定义好数字的控件. 该控件主要需要指导一个用于监听当前value变化的li ...
- CSS skills: 1) Navigate item's animation
<style> .nav { border-right:1px solid #268eb7; } .nav li{overflow:hidden;height:55px;border-le ...
- wpf 父控件透明子控件不透明
在wpf开发中遇到子控件会继承父类控件属性的问题, 例如: <StackPanel Orientation="Horizontal" Grid.Row="1&quo ...
- [改善Java代码]频繁插入和删除时使用LinkedList
一.分析 前面有文章分析了列表的表里方式,也就是“读”的操作.本文将介绍表的“写”操作:即插入.删除.修改动作. 二.场景 1.插入元素 列表中我们使用最多的是ArrayList,下面看看他的插入(a ...
- Scala中的If判断&While&For循环
If 判断: object TestScalaIf { def main(args: Array[String]): Unit = { // val resutlt = judge1(-100) // ...