精华内容
下载资源
问答
  • 因需求需要做个鼠标移动则视频放大图片放大的功能(不能贴原代码这里就讲述一下思路和重点代码段吧),主要用到的就是一个属性,直接增加一个css的属性如下: transform:scaleX(倍数)scaleY(倍数); 倍数可以是小数...

    因需求需要做个鼠标移动则视频放大,图片放大的功能(不能贴原代码这里就讲述一下思路和重点代码段吧),主要用到的就是一个属性,直接增加一个css的属性如下:

    transform:scaleX(倍数) scaleY(倍数);  倍数可以是小数自己可以根据需求调整但是写1的话是一样大的

    如果是放大镜那种效果大概实现思路就是:

    1.获取到原有视频或者图片的高度和宽度

    var width = $("div").css("width");

    var height = $("div").css("height");

    2.直接在你要展示的div中增加一个 ,大概代码如下

    append(<div id='tooTip' height="+height+"  width="+width+" style="transform:scaleX(倍数) scaleY(倍数);"></div>)

     

    如果想要定位展示就不能使用transform实现了,因为都是x,y轴定位的,所以可以手动直接给个height和width,我贴一下定位的代码 注意:tooTip就是新增的那个div,因为说高级点是放大实际就是增加了一个一样的div只是比原来的大一圈大一倍这样的功能

    $("#tooTip").css({ position: "absolute",
            'top': (e.pageY + y) + "px", "left": (e.pageX + x) + "px"
            }).show("fast");
            }).mouseout(function () {
                $("#tooTip").remove();
            }).mousemove(function (e) {
                $("#tooTip").css({ position: "absolute",
                'top': (e.pageY + y) + "px", "left": (e.pageX + x) + "px"
            });

     

    展开全文
  • transition 过渡属性 transition:css属性名称 总时间 运动曲线 何时开始;...设置鼠标放在图片上hover的时候会按比例放大的效果代码如下 <!DOCTYPE html> <html> <head> ...

    transition 过渡属性
    transition:css属性名称 总时间 运动曲线 何时开始;

    这种效果可以在鼠标单击、点击、获得焦点、或对元素任何改变中触发,并以动画效果改变CSS属性值。
    运动曲线属性:

    设置鼠标放在图片上hover的时候会按比例放大的效果:图片hover之后等比例放大,鼠标移开又等比例恢复原状,同时带有动画过渡效果,代码如下

    <!DOCTYPE html>  
    <html>  
        <head>  
            <meta charset="UTF-8">  
            <title>hover放大效果</title>  
            <style type="text/css">  
                div{  
                    width: 900px;  
                    height: 600px;  
                    border: 1px solid #000;  
                    margin: 50px auto;  
                    overflow: hidden;  
                    border-radius: 5px;
                }  
                div img{  
                    cursor: pointer;  
                    transition: all 0.5s; /* 所有的属性变化在0.5s的时间段内完成 */
                }  
                div img:hover{  
                    transform: scale(1.5); /* 鼠标放到图片上的时候图片按比例放大1.5倍   */
                }  
            </style>  
        </head>  
        <body>  
            <div>  
                <img src="./aaa.png"/>
            </div>  
        </body>  
    </html> 
    
    展开全文
  • 该楼层疑似违规已被系统折叠隐藏此楼查看此楼随着逐浪CMS新版的一些效果逐渐放出,有不少的朋友想全屏的背景图片如何设计。在不同的时代有不同的流行网站显示形式,当前很流行的一种网页形式就是满屏大图,本文将用...

    该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

    549fa5a21a9e4e4198defdf9dfcc9ca0.png

    随着逐浪CMS新版的一些效果逐渐放出,有不少的朋友想全屏的背景图片如何设计。

    在不同的时代有不同的流行网站显示形式,当前很流行的一种网页形式就是满屏大图,本文将用最简单的方式实现该效果。用到了CSS 属性background-size ,无需javascript。

    先看demo,打开后,调整浏览器窗口大小,观察背景图的变化。

    如果在你的项目中也需要这样的效果,那么你就来对地方了。

    基本语法:

    .css{ background-image:url("wood.jpg");background-size:cover;background-repeat: no-repeat;background-attachment: fixed;}核心概念

    使用background-size 属性,填充整个viewport

    当css属性background-size 值为cover时,浏览器会自动按比例缩放背景图的宽和高,直到大于或等于viewport的宽和高

    使用媒体查询为移动设备提供更小尺寸的背景图

    为什么要给移动设备提供小尺寸背景图呢?在demo中,我们看到的背景图的实际尺寸为5498px * 3615px,使用这么大尺寸图片的目的是满足绝大多数宽屏显示器,并且不会显示模糊,而代价就是1.7MB的图片体积。

    但是在移动设备上没有必要使用这么大的图片,同时大图还会导致加载变慢,尤其是在移动网络下。

    需要说明的是:为移动设备提供小背景图对该技术方案来说是可选的。

    实践

    HTML

    后面我们会给body标签指定背景图,这样背景图就可以填充整个浏览器viewport了。

    其实,该方案对所有的块级容器都可以生效。如果你的块级容器的宽高是动态的,那么背景图将自动伸缩,充满整个容器。

    CSS body标签的样式如下:

    body {/* 加载背景图 */background-image: url(images/background-photo.jpg);/* 背景图垂直、水平均居中 */background-position: center center;/* 背景图不平铺 */background-repeat: no-repeat;/* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */background-attachment: fixed;/* 让背景图基于容器大小伸缩 */background-size: cover;/* 设置背景颜色,背景图加载过程中会显示背景色 */background-color: #464646;}

    上面最重要的一条就是:

    background-size: cover;

    这样浏览器就会按比例缩放背景图直至背景图宽高不小于容器的宽高(在上面的例子中,就是body标签)。

    这里需要注意的一点就是:如果背景图小于body标签的尺寸(例如在高分辨率显示器上,或页面内容特别多时),浏览器会拉伸图片。我们都知道,当把一个图片拉伸时,图片会变模糊。

    因此,在选择背景图时,要特别注意尺寸。为了照顾到大尺寸屏幕,demo里用的图片尺寸为5498px * 3615px 。

    同时,为了让背景图始终相对于viewport居中,我们声明了:

    background-position: center center;

    上面的规则会把背景图缩放的原点定位到viewport的中心。

    接下来我们需要解决的问题是:当内容的高度大于viewport的高度时,会出现滚动条。我们希望背景图始终相对于viewport固定,即使用户滚动时也是一样。

    解决办法就是:

    background-attachment: fixed;(可选)使用媒体查询应对小屏幕

    为了应对小屏幕,我用photoshop将背景图按比例缩放到768px * 505px,然后通过smush.it 压缩图片体积。这样就将图片体积从1741KB降到114KB,节省了93%。

    下面是媒体查询的写法:

    @media only screen and (max-width: 767px) { body { background-image: url(images/background-photo-mobile-devices.jpg); }}

    上面的媒体查询将max-width: 767px 设为断点,也就是说当浏览器viewport大于767px时,会使用大背景图,反之使用小背景图。

    使用上面媒体查询不利的一面是,如果你把浏览器窗口从1200px缩小到640px(反之亦然),你会看到一个短暂的闪烁,因为小背景图或大背景图正在加载。

    展开全文
  • 1.图片按比例放大css3的transform属性,scale(1)表示原比例&lt;img src="images/xx.png" style="transform:scale(1.05)"/&gt;2.一个微信取色网址:http://bj.96weixin.com/rgb/幽灵...

    1.图片按比例放大:

    css3的transform属性,scale(1)表示原比例

    <img src="images/xx.png" style="transform:scale(1.05)"/>

    2.一个微信取色网址:http://bj.96weixin.com/rgb/

    幽灵白色:GhostWhite  #F8F8FF


    展开全文
  • 该楼层疑似违规已被系统折叠隐藏此楼查看此楼随着逐浪CMS新版的一些效果逐渐放出,有不少的朋友想全屏的背景图片如何设计。在不同的时代有不同的流行网站显示形式,当前很流行的一种网页形式就是满屏大图,本文将用...
  • CSS按比例缩放图片

    2012-11-21 08:49:14
    把一副大图片按比例缩小或者放大到某个尺寸,对于标准浏览器(如Firefox),或者最新都IE7浏览器,直接使用max-width,max-height;或者min-width,min-height的CSS属性即可。如: img{max-width:100px;max-height:...
  • 那有的时候不同的界面,同样的信息(比如头像)放大的尺寸是不一样,怎么才能让图片根据DIV的宽高度进行,缩放呢?其实很简单,只用设置其css样式即可。  .photo img  {  max-width:80px;//这是DIV的大
  • 有时候自己为了控制图片的响应式,按比例缩小放大图片,如果解决这个问题,用js吧,很麻烦、也会损失很大的加载运行速度等;所以我们还是用css来解决这个问题,用css来强制按比例压缩图片的高度或宽度,看代码不说话...
  • CSS3的transform:scale()可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果...
  • CSS3的transform:scale()可以实现按比例放大或者缩小功能。CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果...
  • CSS等比例缩小图片,实用性较强的一个CSS技巧,等比例一般都是在我们规定的高度或宽度超出范围时候,另图片以高或宽为基准按比例缩小或放大,这样保证网页布局的整齐性,这也是CSS功能的强大之处。不过本处是CSS调用...
  • transform:scale()可以实现按比例放大或者缩小功能。 transition可以设置动画执行的时间,实现缓慢或者快速的执行动画,效果图如下: 源码: <!DOCTYPE html> <html> <head> <meta charset=...
  • transform:scale()可以实现按比例放大或者缩小功能。 transition可以设置动画执行的时间,实现缓慢或者快速的执行动画,效果图如下: 源码: <!DOCTYPE html> <html> <head> <meta ...
  • 第一种,让图片和布局宽度高度成等比例,这样CSS设置死宽度和高度,...所以有条件的情况下,大家将首页、图片列表页的布局宽度高度保持一致,上传图片时候将图片先进行处理为布局宽度高度时等比例放大尺寸的。 (...
  • transform:scale()可以实现按比例放大或者缩小功能。transition可以设置动画执行的时间,实现缓慢或者快速的执行动画,效果图如下:源码:css实现鼠标移入时的放大效果div{width: 200px;height: 300px;margin:0 auto...
  • CSS3的transform:scale()可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果...
  • 我们经常会需要把用户...按比例缩小或者放大到某个尺寸,对于标准浏览器(如Firefox),或者最新都IE7浏览器,直接使用max-width,max-height;或者min-width,min-height的CSS属性即可。如: 代码如下 复制代码img{m...
  • CSS3实现鼠标移动到图片图片变大

    千次阅读 2017-08-01 09:39:59
    CSS3的transform:scale()可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果...
  • 图片按比例等比例缩小放大不变形解决方案 解决方法有三种: 1.让图片和布局宽度高度成等比例,这样CSS设置死宽度和高度,图片也是等比例缩小,图片也不会变形。 <!DOCTYPE html> <html lang="en"> <...
  • CSS控制图片大小的方法

    千次阅读 2012-04-20 09:49:31
    网页制作技巧实例解决:用CSS控制图片...可以通过按比例缩小或者放大到某尺寸(自己指定),来保持图片不变形走样的完全显示。 解决方案:  一、 对于标准浏览器(如Firefox),或者最新都IE7浏览器,直接使用max-
  • CSS控制图片大小显示的方法

    千次阅读 2014-09-13 12:11:39
    可以通过按比例缩小或者放大到某尺寸(自己指定),来保持图片不变形走样的完全显示。 对于标准浏览器(如Chrome/Firefox),或者IE7/8浏览器,直接使用max-width,max-height;或者min-width,min-

空空如也

空空如也

1 2 3
收藏数 57
精华内容 22
关键字:

图片按比例放大css