user_login 发表于 2022-12-29 17:35:05

控制帖内图片宽高 图片大小|调整宽高

帖内图片的宽高不设置的话，会在帖子宽度的限制下 以实际宽高显示。
作为后续表格布局和浮动布局的前置，
现在就来介绍一下设置帖内图片宽高的方法。

首先，只有图片链接的方式才能设置宽高。
这对应了相册图片和网络图片的两种传图方式。
--他们的标签都是img。
至于上传图片，那个用的是图片附件标签attachimg，
直接套用格式没有生效，不支持修改显示的宽高捏。

设置图片宽高的格式：
插图之后，在编辑栏的高级模式下勾选纯文本。就能看到插图的img标签了。图片链接要修改图片宽高，只需要修改img标签为：图片链接在第一个img后添加了“=x,y”。其中x是图片宽度，y是图片高度，逗号要用英文的。

举个例子：200×200的原图，修改为300×150的宽高：https://img.gamemale.com/album/202212/04/123051uirilr3wzlwser56.gif
https://img.gamemale.com/album/202212/04/123051uirilr3wzlwser56.gifhttps://img.gamemale.com/album/202212/04/123051uirilr3wzlwser56.gif←原图    修改后→https://img.gamemale.com/album/202212/04/123051uirilr3wzlwser56.gif

图片被拉伸了！是的，这种情况下不美观。但别的地方用得到。
同比缩放的方法？
有！而且不必拿出计算器来算。
当宽或高的值设置为0的时候，就代表这一项是自适应的。
如把上图缩小一半和放大一半，固定宽度，然后高度设为0自适应：https://img.gamemale.com/album/202212/04/123051uirilr3wzlwser56.gif
https://img.gamemale.com/album/202212/04/123051uirilr3wzlwser56.gif
https://img.gamemale.com/album/202212/04/123051uirilr3wzlwser56.gifhttps://img.gamemale.com/album/202212/04/123051uirilr3wzlwser56.gif←缩小一半https://img.gamemale.com/album/202212/04/123051uirilr3wzlwser56.gif放大一半→https://img.gamemale.com/album/202212/04/123051uirilr3wzlwser56.gif

黑达克 发表于 2022-12-29 17:44:00

本帖最后由 黑达克 于 2022-12-29 18:01 编辑


值得一提的是【=x,y】，的设定也是可以用来控制帖内分享视频播放器大小的。
一般点开添加视频的时候，输入视频地址底下默认的宽为500，高为375。对于B站视频来说，这个大小是可以完整显示播放器的控制界面的。（设置得太小的话，播放器的控制界面会消失，只留下视频界面）
然后在油管点击分享的时候，油管的嵌入视频默认（推荐？）大小是宽560，高315。想要在帖内分享油管视频的时候可以试试这个大小。
===
p.s.30帖！优老师怀上啦！
恭喜优老师喜得贵蛋！祝福宝宝顺利破壳，茁壮成长！{:6_195:}

https://img.gamemale.com/album/202008/03/121119u8892jruaakhv3dv.gif→https://img.gamemale.com/album/202008/03/121119u8892jruaakhv3dv.gif→https://img.gamemale.com/album/202008/03/121119u8892jruaakhv3dv.gif→https://img.gamemale.com/album/202008/03/121119u8892jruaakhv3dv.gif

优老师教学实际应用之【软泥怪蛋奇怪的成长方式】

Lano 发表于 2022-12-29 17:40:43

优老师率先完成三十发帖，可喜可贺可喜可贺

sb123 发表于 2022-12-29 17:40:48

恭喜呀，优老师的小寄巧真多，虽然摆烂人学着真费劲（这躺平多是一件美事啊）

飞翔的猫 发表于 2022-12-29 17:44:48

谢谢，这个小技巧很实用，缩小图片比例会提高阅读体验

青のフラッグ 发表于 2022-12-29 17:45:34

技术贴好评，发资源贴的时候图片是挺麻烦的，不过我一般不用链接传图片似乎暂时用不上{:6_190:}

Burry 发表于 2022-12-29 17:46:29

论坛发图片确实挺麻烦的，限制图片大小比较苛刻，我一般都是QQ截图法很好解决了。

一静一静 发表于 2022-12-29 17:47:30

优老师真素论坛代码达人惹，又学习了一个

阿斯蒂芬方块 发表于 2022-12-29 17:51:36

感谢优老师的教学，我上学都没这么认真过

cdcai 发表于 2022-12-29 17:56:22

我只知道只要把自己想上小电视的图拉到最宽就行{:4_114:}

小小小小黑 发表于 2022-12-29 17:57:34

猫猫可爱捏，又学到一个不太会用到的技巧呢，小黑我太懒了，都是让图片自适应的{:6_167:}

娱乐法师火布偶 发表于 2022-12-29 17:58:25

又get了新的小寄巧，自适应的属性还是很好用的

yui9723233 发表于 2022-12-29 18:11:50

哇 太感谢楼主分享了

书の妖怪 发表于 2022-12-29 18:13:08

优老师的技巧小课堂连发，芝士不断增加;P

歧路歌 发表于 2022-12-29 18:17:04

原来一项调整为0就是自适应，真是帮大忙啦！

cc簗橗 发表于 2022-12-29 18:28:48

得想个办法把优老师弄到手，这个男人小技巧真多

上口下天先生 发表于 2022-12-29 18:29:56

还是尤老师笑到最后了{:4_114:}

天海一色 发表于 2022-12-29 18:39:29

外連圖片以後大概用不到,內嵌視頻應該會派上用場:$

pighow 发表于 2022-12-29 18:45:03

恭喜优老师抱走了最后一只软

duoan 发表于 2022-12-29 18:50:05

每天学废一个小技巧脑我会手我废{:6_169:}
页: [1] 2 3
查看完整版本: 控制帖内图片宽高 图片大小|调整宽高