【css】image 使用 transform:scale 放大后显示不全的问题

于 2024-07-14 17:29:09 发布
阅读量236 收藏
点赞数
分类专栏： 前端 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39559879/article/details/140419740
版权

css 可以用 transform: scale(1.2) 实现图片放大 1.2 倍显示的功能，在此基础上可以修改 transform-origin 为用户点击的坐标值优化体验。问题在于 origin 位于图片下方时，图片放大后出现滚动条，而滚动条的高度会忽略放大显示的图片的上半部分，导致用户滚动到图片上方时会发现图片显示不全。

解决：可以设置图片的 margin-top 为 transform-origin 的 y 值，这样多余的部分会被顶下来，然后在渲染完成后设置 scrollTop = y，让图片滚动到原先的 origin

缓次郎
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
image transform:scale 放大在iphone下变模糊
langyalaoa的博客
04-10 2481
解决： img标签放大再缩小 img { width: 300%; transform: translate3d(-50%, -50%, 0) scale(0.33, 0.33); -webkit-transform: translate3d(-50%, -50%, 0) scale(0.33, 0.33); -moz-transform: translate3d(-50%, -50%
c语言scale函数,我可以在Transform中使用Calc：Scale函数在CSS中吗？
weixin_35160938的博客
05-21 554
我试图计算适用于儿童的父母中右边的刻度，但我不能使用calc()内transform: scale CSS功能。 我已经使用javascript完成了这个功能，但是我对纯粹的CSS解决方案感兴趣，以避免使用脚本尽可能地膨胀页面。我可以在Transform中使用Calc：Scale函数在CSS中吗？例子： CSS.anyclass{height:250px; /*this value can cha...
-webkit-transform:scale(1.04)放大缩小效果
date25000的博客
07-30 1634
<p>【鼠标移动进去图片放大一倍效果：运用了-webkit-transform:scale(1.04)效果】</p> 如图：鼠标移动上去的时候图片放大一倍的效果， <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1...
transform导致溢出_html – 使用转换SCALE时CSS防止溢出
weixin_29505425的博客
02-11 455
我在使用transform时遇到问题：scale();基本上,我在具有溢出的图像上使用此缩放：隐藏检查这个小提琴的实时动作：https://jsfiddle.net/ns3vm3x6/HTML i want this image to scale just like #example no. 2. how to achive this one? CSS#container1 {width:...
CSS设置标签、图片，放大、缩小、旋转、移动、倾斜(transform)
热门推荐
qq_57340195的博客
01-21 2万+
CSS设置标签、图片，放大、缩小、旋转、移动、倾斜(tranform) 1.缩小和放大属性（scale） 格式：tranform：缩小类型（数值）； 注意：缩小和放大都是 scale ； 其中的值（0~1）代表缩小；大于1代表放大。其中0代表缩小到没有，1代表不变。 tranform:scale(0.5) /*整体缩小到原来的一半*/ tranform:scale(2) /*整体放大到原来的一半*/ tranform:scaleX(0.5) /*宽缩小到原来的一半*/
transform导致溢出,CSS3变换缩放和容器与溢出
weixin_39641236的博客
12-22 333
I am trying to create a zoom-in functionality for a container with CSS3 Transform (scale) and all seems to work nicely, but when the image is scaled, the overflow only covers a part of the image, leav...
Canvas使用css transform实现旋转放大缩小
zhuo599的博客
03-30 1516
接上面的一个功能需求做的一个demo：学生提交的答案图片老师也需要在一体机上批改，考虑到实际应用效果，答案显示如果在一体机靠上边，部分老师够不到(0.0)，然后就需要旋转画板放大和缩小，这里其实就是跟放大图片效果差不多的，但是我之前的方法是老师每操作一次放大缩小，我就重新绘制canvas，得到的结果是放大缩小的次数越多，图片清晰度直线下降，所以不行。这次改成了用css3实现了，效果不错，记录一下。...
transform(转换)
无糖加冰
01-08 3063
CSS3中的transform(转换) transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移,旋转,变形,缩放等效果. 浏览器支持情况 Internet Explorer 10、Firefox、Opera 支持 transform 属性。 Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。 Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。 Opera 只支持 2D 转
一文搞懂css 2D动画效果
一个非常Cool的人
01-28 1659
讲述了css中的2d动画效果中的定位、旋转、缩放,以及过渡，合理的使用动画效果会极大地提高用户使用体验。
CSS3鼠标悬停图片全图显示特效
07-24
本主题“CSS3鼠标悬停图片全图显示特效”聚焦于如何利用CSS3特性来实现一种手机端响应式的图文列表布局，当鼠标悬停在图片上时，图片会全屏展示，为用户带来更为生动的浏览体验。以下将详细介绍这个特效的实现原理、...
css3 transform旋转属性鼠标悬停3D立体图片旋转显示
11-03
其中，`function`可以是`rotate()`, `scale()`, `translate()`或`skew()`等，每个函数后可跟一个或多个值来指定变换的程度。 二、`rotate()`函数与3D旋转 `rotate()`函数用于对元素进行旋转，接受一个角度参数，如...
CSS3鼠标经过突出放大显示特效特效代码
03-20
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉效果和交互体验，其中之一就是鼠标经过时的突出放大显示特效。这种特效能够吸引用户注意力，提升用户体验，尤其是在电商网站或者产品展示页面中，常...
jQuery css3图片逐个放大缩小显示排列
11-12
在页面加载完成后，我们可以遍历所有的图片元素，使用`setTimeout`函数来延迟执行放大和缩小的动画效果，从而达到逐个显示的效果： ```javascript $(document).ready(function() { var delay = 1000; // 图片之间...
CSS3悬停放大图片两边模糊显示.zip
11-17
总之，通过CSS3的 `transform`、`transition` 以及 `backdrop-filter` 属性，我们可以轻松实现图片悬停放大并伴随两边模糊显示的效果。这不仅增强了用户体验，也为网页设计提供了更多创意可能性。结合JavaScript和...
CSS 技巧与案例详解：开篇介绍
最新发布
粉丝们务必加入微信粉丝群
07-14 22
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
html设计（两种常见的充电效果）
2301_81704123的博客
07-12 2639
title>充电效果
scss概念及使用
m0_74293254的博客
07-10 1126
/ 样式规则使用参数在上面的例子中，@mixin 关键字定义了一个名为 mixin-name 的混合，可以接受多个参数（如果需要的话），并在其中定义一组样式规则。SCSS 的三种循环结构 @for、@each 和 @while 分别用于按照索引循环、遍历列表或 map 类型数据、以及根据条件循环生成样式。这些循环结构使得 SCSS 更加强大和灵活，能够根据需求生成复杂的 CSS 规则。在 SCSS 中，可以使用自定义函数来增强样式表的功能，这些函数可以接受参数并返回处理后的值。
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
uu0216的博客
07-10 1228
CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影，你可以通过在box-shadow属性中用逗号分隔多个值对来实现。 上面代码，我们分别给按钮增加了红，黄，蓝，绿四种颜色的投影，并且让投影扩散范围增大，我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面，把鼠标移动到按钮上，我们得到了这样的按钮效果：
如何使用 CSS3 的 transform: scale() 和 translate() 等属性代替 filter: blur(500px)。
06-07
使用 CSS3 的 transform: scale() 和 translate() 等属性代替 filter: blur(500px) 是一个比较常见的技巧。可以使用以下步骤实现： 1. 创建一个父元素，设置其 position: relative; 2. 在父元素中创建一个子元素，设置其 position: absolute; top: 0; left: 0; right: 0; bottom: 0; 并设置需要模糊的背景图或者背景颜色； 3. 使用 transform: scale(...) 和 translate(...) 属性，将子元素放大并平移，使其填满父元素； 4. 最后，将子元素的 opacity 设置为 0.5，或者使用其他透明度值，以达到模糊效果。 具体代码如下所示： ```html <div class="blur-wrapper"> <div class="blur-background"></div> </div> ``` ```css .blur-wrapper { position: relative; width: 100%; height: 100%; } .blur-background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('your-image-url'); /* or use background-color */ transform: scale(1.5) translate(-50px, -50px); opacity: 0.5; } ``` 注意：transform: scale(...) 和 translate(...) 属性需要根据实际情况进行调整，以达到最佳效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值