阿里云的图片裁剪的使用问题

来源:9-9 作业 完成文章详情页

慕莱坞0998854

2021-05-09

老师你好,我阅读了一下图片裁剪部分的文档,产生了如下疑问
图片描述
如上,文档里写的是可以使用m_fill和m_fixed模式的(老师使用的是m_pad),我把代码部分的m_pad改为了m_fixed,效果如下
图片描述
如上,根本不起作用,还是200 x 200
我的问题是
1> m_fixed和m_fill的文档的描述是否有问题? “固定宽高缩放” “固定宽高,自动裁剪”, 我感觉这两个都只能应对需要"缩"的场景,没法对应"放"的场景
2> 如果dom结构如下

<div class="container">
	<img />
</div>

container是bootstrap里面常用的布局,在不同的分辨率下width不同, 我想的是img的宽度和这个container一致,也就是说这个img的宽度是不定的,在这种情况下,阿里云的图片裁剪还有必要嘛?比如上面的200 X 200的图片,即使使用m_pad进行填充,我也不知道该填充多大的尺寸啊,并且填充大块的白色部分本来也不好看。

写回答

1回答

张轩

2021-05-10

同学你好 

第一个问题:这两个属性确实只能处理缩的场景,只能变小,不能放大。

第二个问题,对于响应式的问题,不需要使用阿里云裁剪,可以使用css 属性,更方便好用, background-size https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size 或者是 object-fit 

https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

可以了解一下

0
0

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目,率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

查看课程