文章详情页

jquery - css3 scale 缩放图片问题

【字号：大中小】日期：2023-07-16 14:53:09浏览：40作者：猪猪

问题描述

我想点击document让p的图片从中心点向两边展开一张图片的大小用了css3的缩放，但是他会把图片弄失真，问下用css3能否实现

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Document</title> <style>p { width:1px; background:url(http://www.ppt123.net/beijing/UploadFiles_8374/201203/2012032518062306.jpg); background-size:cover; height:600px; margin:100px auto; -webkit-transform-origin:left top; -moz-transform-origin:left top; -o-transform-origin:left top; -ms-transform-origin:left top; transform-origin:left top; -webkit-transition:1s; -moz-transition:1s; -o-transition:1s;} </style></head><body> <p class='outter'></p> <script src='http://cdn.bootcss.com/jquery/2.2.1/jquery.js'></script> <script>$(function() { $(document).on(’click’,function(){ $(’p’).css({ ’-webkit-transform’:’scaleX(800)’,’transform’:’scaleX(800)’ }) })}); </script></body></html>

问题解答

回答1：方法一：js

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Document</title> <style>p { width:0; height:0;position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: 50% 50%;background:url(http://www.ppt123.net/beijing/UploadFiles_8374/201203/2012032518062306.jpg); background-size:cover;} </style></head><body> <p class='outter'></p> <script src='http://cdn.bootcss.com/jquery/2.2.1/jquery.js'></script> <script>$(function() { $(document).on(’click’,function(){ $(’p’).stop(true).animate({ width: 800, height: 600 }) })}); </script></body></html>方法二：scale

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Document</title> <style>p { width: 800px; height: 600px; margin: 100px auto 0; transform: scale(0); transform-origin: 50% 50%; transition: transform .4s ease-in-out; background:url(http://www.ppt123.net/beijing/UploadFiles_8374/201203/2012032518062306.jpg); background-size:cover;} </style></head><body> <p class='outter'></p> <script src='http://cdn.bootcss.com/jquery/2.2.1/jquery.js'></script> <script>$(function() { $(document).on(’click’,function(){ $(’p’).css({ 'transform': 'scale(1)' }) })}); </script></body></html>方法三：纯CSS

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Document</title> <style>.outter { width: 800px; height: 600px; margin: 100px auto 0; background-color: gray;}.inner { width: 800px; height: 600px; transform: scale(0); transform-origin: 50% 50%; transition: transform .4s ease-in-out; background:url(http://www.ppt123.net/beijing/UploadFiles_8374/201203/2012032518062306.jpg); background-size:cover;}.outter:hover .inner { transform: scale(1);} </style></head><body> <p class='outter'><p class='inner'></p> </p></body></html>回答2：

你的图片是位图，放大肯定会失真,你要用矢量图。你用css3也可以实现，要用高版本的浏览器。但是图片照样会失真。

回答3：

你只放大x肯定失真。。模糊的话需要用矢量的

CSS

上一条：css3写不规则样式背景下一条：css - 边框凹陷效果怎么实现

相关文章：

1. 引用 node.js express加载静态文件　报错 ??2. javascript - 引入 simditor，但是显示标签，这个怎么解决。3. Android任务列表效果怎么实现4. android-studio - android studio 结巴了，有什么办法可以治好它吗？5. 优先级的问题？6. 如何更新/删除指定的两条或多条数据7. mysql_replication - mysql读写分离时如果单台写库也无法满足性能怎么解决8. android - 目前有哪些用Vue.js开发移动App的方案？9. vue.js - weex 没有背景图片属性怎么办？10. node.js - 利用vue-cli 构建执行到npm run dev 报错，求解~

排行榜

					
					引用 node.js  express加载 静态文件　报错 ??
javascript - 引入 simditor，但是显示标签，这个怎么解决。
android - 如何RecyclerView的item宽度设置
android - 目前有哪些用Vue.js开发移动App的方案？
android-studio - android studio 结巴了，有什么办法可以治好它吗？
android - 添加multidex后在部分机型上产生anr的问题，该如何解决
vue.js - weex 没有背景图片属性怎么办？
Android任务列表效果怎么实现
如何更新/删除指定的两条或多条数据
angular.js - 关于ui-sref地址栏缺省的问题
node.js - 利用vue-cli 构建执行到npm run dev 报错，求解~
				

热门标签