css3等比例缩放，div等比例缩放

在css3中怎样使背景颜色缩放,而边框不动

如果直接设置背景opacity值为0.8，会使文字的颜色发生改变。解决方法就是在设置背景色时使用rgba(red，green，blue，opacity)来对背景色进行设置，这样就可以单独的改变背景的透明度，而不会影响到里面的内容(包括文字和图片)。

要解决页面背景颜色未铺满的问题，可以尝试以下几种方法：使用overflow属性：在包含transform属性的元素上添加overflow属性，并将其值设置为hidden，这可以使元素的背景颜色完全填充。

相应的，如果把值改为0.5，hover的时候x和y就会缩小到原来的二分之一。需要注意的是它的transfom-origin是中心点 只缩放X轴上的倍数。transformY：scale(y)； 只缩放Y轴上的倍数。以上的缩放点都是中心点。

相关问答

Q1: CSS3如何固定图片宽度使图片高度按图片比例自适应?

1、使用img标签，给它的width属性设定一个绝对数量值，其高度就会自动按照width的值进行缩放了。

2、viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为0，即网页初始大小占屏幕面积的100%。所有主流浏览器都支持这个设置，包括IE9。

3、宽度和高度不要同时设置，只需要设置一个，另一个就会自动按照图片的原始比例进行缩放，从而使图片不会发生变形。

4、）length：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 auto。2）以父元素的百分比来设置背景图像的宽度和高度。

5、这个需要css3来控制了：页面代码： 样式：.bgImge{ width：100%；--div的宽高一定要给指定。

6、框框宽高比例不变：直接设置该 img 的 max-width：100%； 就可以了。比例要变，要图片自动被 div 切掉一些再居中的话，恐怕只有用js结合才能实现了。

Q2: 背景图怎么等比例缩放?

按快捷键CTRL+T，可执行自由变换，在编辑菜单下——变换可以看到快捷键使用方式。用鼠标拖拽四角角中任意一个角，都可以放大缩小图片，但是这样拖动出来的图片会变形。

右键“背景”图片，复制图层。在“背景副本”上按键盘上的“Ctrl+T”键，还需要按住“Shift”键，即可实现等比例放大和缩小图片。

PS等比例缩放快捷键：Shift+Alt PS等比例缩放快捷键使用方法 双击背景图层，点击确定。将图层进行解锁。按Ctrl+T将图片载入变形边框。按住Shift+Alt就可以向中心等比缩放。

工具/材料：Windows7系统的电脑，word2019 打开电脑，桌面找到并打开word软件。打开word软件后，双击页眉-点选背景图片-右键-大小。弹出的大小窗口，设置自己需要的比例。点击关闭页眉和页脚编辑模式即可。

问题一：word设置背景图缩放比例 双击页眉――点选背景图片――右键――设置图片格式――大小――缩放：订入百分比――确定――关闭“页眉和页脚”工具条。

PS等比例缩放快捷键：Shift+AltPS等比例缩放快捷键使用方法双击背景图层，点击确定。将图层进行解锁。按Ctrl+T将图片载入变形边框。按住Shift+Alt就可以向中心等比缩放。

Q3: 如何使用JS+CSS3实现图片响应鼠标移动放大缩小

要实现鼠标放在block上以中心为原点进行放大，可以利用CSS3的transform和transition来实现 CSS3的transform： scale()可以按比例放大或缩小block的功能。

准备好需要用到的图标。新建html文档。书写hmtl代码。 。书写并添加js代码。/script。代码整体结构。查看效果。

用js，先是一个小图片（缩略图），onMouseOver时触发js写的Function，当然Function中是处理方法。这只是简单思路，至于怎么写网上有很多类似的代码可以供你copy了，自己找找。

用js控制图片额大小。主要是修改图片的宽度和高度。下面是简单的代码实现：HTML 代码：这个时候img的图片自身是多大，就会显示多大。100px*100px的图。

解决图片角度的问题大概原理很简单，切换HTML元素对象（图片）的class。

这次给大家带来怎样使用JS+AJAX做出三级联动，使用JS+AJAX做出三级联动的注意事项有哪些，下面就是实战案例，一起来看一下。

Q4: 怎么用css3来实现div的等比例缩小的动态效果

旋转方法，通过rotate方法，在参数中加入角度值，角度值后面跟表示角度单位的“deg”文字即可，旋转方向为顺时针方向。缩放，使用scale方法来实现文字或图像的缩放处理，在参数中指定缩放倍率。

现在由我来向大家介绍一下在css3中如何使用transition属性和hover属性实现div颜色渐变和放大缩小的效果。

需要用@media写多份css的。无法做到真正的随屏幕变化而变化。而的用法是随着屏幕的大小，自动把页面自适应到屏幕的大小。这个是管用的。

Q5: CSS3伸缩布局

伸缩布局是弹性布局的伸缩项目。伸缩布局是一种CSS3的新布局方式，又叫弹性布局，他是弹性布局的伸缩项目。弹性布局（弹性伸缩布局）事实上它是一种新类型的盒子模型，也有书上称作弹性伸缩盒布局。

这些天把对于css3伸缩布局盒（flexbox）模型的理解写成博文，目的是对flexbox做一个简单的介绍。

CSS3中的模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。Flexbox由和组成。通过设置元素的display属性为flex或inline-flex可以得到一个伸缩容器。

响应式布局（媒体查询）——通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

transform：scale(.5)确实就是这样的，如果想要他所占的位置是100px。

css3等比例缩放的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于div等比例缩放、css3等比例缩放的信息别忘了在本站进行查找喔。