如何修改iframe下面的img的宽高。oss上面的图片的缩放问题

最新推荐文章于 2022-07-18 23:39:16 发布

肖肖肖丽珠

最新推荐文章于 2022-07-18 23:39:16 发布

阅读量4k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端小知识

本文链接：https://blog.youkuaiyun.com/qq_33769914/article/details/90479825

前端小知识专栏收录该内容

208 篇文章

订阅专栏

博客讲述了如何处理iframe中OSS图片的缩放问题。作者提到当图片宽度超过iframe设定的宽度时，会出现滚动条。通过在CSS中设置`iframe img{max-width:100%}`并未达到预期效果。解决方案是利用OSS的图片处理功能，通过在图片URL后添加`x-oss-process=image/resize`参数来指定图片的宽高，实现按比例或指定尺寸缩放。文章提供了不同缩放方式的示例URL。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<iframe data-v-62f923e1="" src="https://orgstatic1.vvwx.net/1f0e3dad99908345f7439f8ffabdffc4/Testlib/1558582161356163.jpg" width="100%" height="500px"></iframe>

我的ifame里面是张图片。在浏览器里面可以看到他解析的内容是：

里面是个img的图片。我想让这个图片在我固定的宽度里面最多宽度为100%；我写了一个全局样式iframe img{max-width:100%}发现好像没有用啊。

而现在的效果是如果我的图片很大超过了外面设置的宽度。它会按照原尺寸显示，然后外面有滚动条。如果小就是原尺寸

从上面的图片的地址也可以看到我是把图片存在了oss的。所以我要改变图片大小就的采用

将图片按照要求生成缩略图，或者进行特定的缩放。
说明：图片处理支持的格式：jpg、png、bmp、gif、webp、tiff。

参数：

指定宽高缩放

名称	描述	取值范围
m	指定缩略的模式： m_lfit 等比缩放。限制在设置的w于h的矩形直接的最大图片。按长边优先 m_mfit：等比缩放延伸出设置的w于h的矩形直接的最小图片。按短边优先 m_fill：固定宽高。将延伸出设置的w于h的矩形外的最小图片进行矩阵裁剪 m_pad：固定宽高。缩略填充 m_fixed：强制按照宽高缩略	[lfit,mfit,fill,pad,fixed]，默认为lfit。
w	指定目标缩略图的宽度	1-4096
h	指定目标缩略图的高度	1-4096
limit	指定目标缩略图大于原图时是否处理。1不处理。0处理。默认是1	0/1
color	当缩放模式是m_pad。可以设置填充的颜色。才有16进制color_FF0000.	[000000-FFFFFF]