整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

一个简单的CSS属性助你实现页面的等比例缩放,快来学习一下吧


在响应式布局逐渐成为主流的今天,网页或者app的流式布局已经不算是一个新鲜的词汇了。今天我要讲的一个内容也是跟页面流式布局有关,如何让你的网页实现完美的缩放?

网页布局

我们可以很快速的写出一个响应式布局的页面,首先看一下效果图。

网页布局

其中html部分的代码如下:

html部分代码

css中的item代码为:

css代码

通过以上代码,完成上述的流式布局后,在我们改变浏览器窗口大小时,div也会随之进行缩放。

问题

But,你以为这就是我们想要的结果吗?

当然不是!在改变浏览器窗口大小时,我们发现虽然div的宽度是进行了缩放,但是高度却没变,因此div的宽高比并未保持原始比例,我们可以看下以下的效果。

缩放后宽高比

从上图中可以很容易看出,缩放后的div宽高比比之前小很多,这并不是我们想要的结果。

我们需要达到的效果是在改变浏览器窗口大小时,div也会随之进行等比例的缩放。

实现办法

首先,可以使用Javascript代码去实现,这是没有问题的。但是绑定Javascript的onresize事件,在拖拽时可能会出卡顿现象,体验不是很好。

接下来我们通过CSS来实现以上的效果。

使用的核心属性是我们平时并不太注意的padding-bottom。

padding-bottom有一个很容易让人忽略的特性是,当取值为百分比形式时,其百分比的基数是父元素的宽度,而不是高度。

因此我们可以在不用给父元素设置高度的时候,就可以通过padding-bottom属性确定当前元素的高度。我们的做法如下。

  1. 将元素的height属性设为0,通过padding-bottom属性确定元素高度。

  2. 设置合理的padding-bottom值,例如上述的例子中,在宽度为21%时,如果需要高度是宽度的1.62倍,我们可以将padding-bottom取值为34%

修改后的CSS代码如下。

修改后的CSS

修改后,我们再次调整浏览器窗口的大小,就会发现div是等比例的进行缩放,完美达到了我们的要求。

修改后等比例缩放

疑问

在这里,可能会有人有疑问如果设置overflow:hidden;那么里面的文字会不会因为超过height,就会被隐藏了?

答案是不会的,根据CSS2.1的规范,overflow只会对处于padding外面的内容生效,即只有超出了 padding区域的内容才会被overflow属性隐藏掉。而在设置padding-bottom后,实际已经决定了元素的height属性,因此overflow:hidden;不会生效。

总结

今天这篇文章主要讲解了利用CSS完成页面等比例缩放的最简单方式,你学会了吗?

html页面制作中,可以利用 CSS 中的 transform 属性对图片进行旋转,缩放,移动或倾斜的操作。而今天我们只说说 transform 属性对图片进行等比例的缩放操作。

css transform 属性的介绍

transform:该属性向元素应用 2D 或 3D 转换。它允许我们对元素进行旋转、缩放、移动或倾斜的操作。

缩放使用值:

scaleY(n):对高度进行缩n倍的缩放

scaleX(n):对宽度进行缩放,n指的是缩放比例

scale(n):对整体高度和宽度进行缩放,n为缩放的比例,为数字

示例代码:

transform: scale(2)

css图片宽度缩放

scaleX():可以对元素(图片)的宽度进行缩放,以下代码是将原来的图片的宽度放大了2倍。

示列代码:

<div class="divimg">
 <img src="biao.png" >
 <br/>
 <!--宽度缩放-->
 <img src="biao.png" style="transform:scaleX(2);">
</div>

运行结果:

了点时间写的,蛮长时间了。个人很喜欢,一段很简单的代码,却能够实现很多功能。(因为代码文字呈现没有格式,难以阅读,以后小编提供的代码都以截图方式呈现,底部有源码链接)。

到底多简单,先来看代码


基于jQuery

基于jQuery

拖拽实例图:

拖拽实例图

将代码剥离,只要写5行就可以实现拖拽了,是不是很简单:

调用方式


放大、缩小

我们给拖拽增加点功能,支持放大、缩小,先看实例图:

放大、缩小

将代码剥离,原先的代码保留不变,增加一个绑定事件:

放大、缩小

这样来实现放大、缩小、拖拽是不是很简单,还能实现很多其他效果,大家慢慢领悟。

原理分析:

放大、缩小、拖拽都离不开在网页上拖动鼠标,对于前端来说就是 document 的 mousemove,当鼠标在网页上移动的时候,无时无刻不在触发 mousemove 事件,当鼠标触发事件时,什么时候需要执行我们特定的操作,这就是我们要做的了。我在 mousemove 中增加了几个对象来判定是否进行操作:

  • move:是否执行触发操作

  • move_target:操作的元素对象

  • move_target.posix:操作对象的坐标

  • call_down:mousemove的时候的回调函数,传回来的this指向document

  • call_up:当鼠标弹起的时候执行的回调函数,传回来的this指向document

小提示:

  • 简单的操作,只需要设定 move_target 对象,设置 move_target 的时候不要忘记了 move_target.posix 哦;

  • 复杂的操作可以通过call_down、call_up进行回调操作,这个时候是可以不用设置 move_target 对象的

深入研究

拖拽和放大、缩小实现了,但是有个问题,当我们鼠标点击并滑动的时候,是会选中文本的,为了避免这个问题,大家可以自行百度

css 阻止文本选中

css 阻止文本选中

网页的放大、缩小、拖拽事件就研究到这里了,小编不再对如何拓展进行深入讲解,一切靠大家自行研究,权当课后作业了。~~

源码链接地址:

http://orzcss.com/posts/d554a392/


本文内容均属个人原创作品,转载此文章须附上出处及原文链接。

加关注,定时推送,互动精彩多,若你有更好的见解,欢迎留言探讨!