Still（改变帖子宽高比演示）

马黑黑

马黑黑

<style> @import 'https://638183.freep.cn/638183/web/css/tz01.css'; #pa { aspect-ratio: 3/2; z-index: 1000; --bg: url('https://638183.freep.cn/638183/t24/w5/still.webp') no-repeat center/cover; --ma-size: 20%; --offsetX: 81px; } #btnFs { right: 30px; top: 30px; color: #eee; } </style> <div id="pa"> <audio id="aud" src="https://music.163.com/song/media/outer/url?id=30375354" autoplay loop></audio> <video class="pd-vid" src="https://img.tukuppt.com/video_show/15653652/00/30/01/5fa35f70c94d7.mp4" autoplay loop muted></video> <div id="ma" class="sepia"><svg id="msvg" width="100%" height="100%" viewBox="-200 -200 400 400"></svg></div> </div> <script type="module"> import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js'; import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js'; var dr = Dr.dr(msvg); var d = 'M0 0 L-40 -190 Q0 -20,40 -190 L0 0'; var tt = 5; Array.from({length: tt}).forEach((_,k) => dr.path(d, 'snow', 'beige', 4).transform(`rotate(${360/tt*k})`)); dr.circle(0, 0, 100, 'none', 'snow', 20).style('opacity: 0.6;'); FS(pa, ma); </script>

马黑黑

核心在第 3 行代码：

        #pa { aspect-ratio: 3/2; z-index: 1000; --bg: url('https://638183.freep.cn/638183/t24/w5/still.webp') no-repeat center/cover; --ma-size: 20%; --offsetX: 81px; }

这是根据图片的比例做的调整。这个设定，在常规显示模式下，图片得以以实际宽高比例呈现；在全屏模式下则只能屈服于显示设备的宽高比、全屏API的工作机制和相关 background-size 设置。

花飞飞

马黑黑 发表于 2025-8-30 09:01
核心在第 3 行代码：

        #pa { aspect-ratio: 3/2; z-index: 1000; --bg: url('https://638183.fre ...

aspect-ratio: 3/2这个好，面熟。。
之前的贴子里常常有用到，配了宽的设置width: clamp(600px, 90vw, 1700px);，高度自动height: auto;

现在是宽度在封装里面600——1400，按3/2得出高度。
试着把它改为17/9，图片下方按比例裁掉一些，图片会窄一点

花飞飞

中间的小播是个组合图片，除了5个鱼形旋转组合图案外，还给了个圆形做底座。
r = 20;这个的作用没看懂，跟后面圆里跟的20有木有关系呀

花飞飞

这次的鼠标触碰效果不太明显，几乎看不出来有啥变化。音乐清脆柔和，好听

马黑黑

花飞飞 发表于 2025-8-30 11:34
这次的鼠标触碰效果不太明显，几乎看不出来有啥变化。音乐清脆柔和，好听

不用太明显

马黑黑

花飞飞 发表于 2025-8-30 11:24
中间的小播是个组合图片，除了5个鱼形旋转组合图案外，还给了个圆形做底座。
r = 20;这个的作用没看懂，跟 ...

r 变量时为画圆使用的：开始设计的时候是画多个圆，每一个圆的半径根据迭代乘上k，后面觉得一个够了，就单独在后面后，r 变量就变成了多余变量

马黑黑

花飞飞 发表于 2025-8-30 11:14
aspect-ratio: 3/2这个好，面熟。。
之前的贴子里常常有用到，配了宽的设置width: clamp(600px, 90vw, 1 ...

其实一切考虑是根据图片而定

红影

又一种宽高比，这个比例的图图高度更大点呢

红影

看到以这个比例显示的图片，进入全屏时，上下被隐去部分，和前面那个比例设置正好相反呢。

马黑黑

红影 发表于 2025-8-30 13:47
看到以这个比例显示的图片，进入全屏时，上下被隐去部分，和前面那个比例设置正好相反呢。

这可以看出 一些道理了吧

马黑黑

红影 发表于 2025-8-30 13:45
又一种宽高比，这个比例的图图高度更大点呢

这是为了适配不同比例图片的演示

红影

马黑黑 发表于 2025-8-30 14:19
这可以看出 一些道理了吧

是的，这样比较学习更有收获

红影

马黑黑 发表于 2025-8-30 14:19
这是为了适配不同比例图片的演示

嗯嗯，使用不同的图图，就要用相应的比例去演示才好。

花飞飞

马黑黑 发表于 2025-8-30 12:08
不用太明显

这也算是一种变化

花飞飞

马黑黑 发表于 2025-8-30 12:10
r 变量时为画圆使用的：开始设计的时候是画多个圆，每一个圆的半径根据迭代乘上k，后面觉得一个够了，就 ...

明白了。。原来也打算整个公式的。。那就有许多同心圆了。。
其实跟后面的20没关系，才发现那里是线宽。

花飞飞

马黑黑 发表于 2025-8-30 12:10
其实一切考虑是根据图片而定

根据背景大小灵活选用。。
这几种对比后理解更深了

马黑黑

花飞飞 发表于 2025-8-30 17:23
根据背景大小灵活选用。。
这几种对比后理解更深了

马黑黑

花飞飞 发表于 2025-8-30 17:22
明白了。。原来也打算整个公式的。。那就有许多同心圆了。。
其实跟后面的20没关系，才发现那里是线宽。