关于手机端显示缩放的问题

[liuly0322]

如题，现在的手机端显示图片高度也是固定的，比如对于一张图片： <img src="/uploads/images/820f908e841a3ea7f3587c6446a413b45c4c530c.jpg" style="height:569px; width:869px"> 由于设置了 height:569px; 会导致手机端显示的时候图片高度固定，产生了严重的拉伸，ui 较为不协调

如果是想方便用户查看较大图片或许可以考虑采用 jquery.fancybox 库 ？因为我注意到本项目已经使用了 jquery

[liuly0322]

此处 https://github.com/jingning42/ustc-course/blob/7051ec118de2a7b0e3d129c0965d29855e65b6c8/app/static/css/style.css#L333

改为

.review img { max-width: 100%; object-fit: contain;}

可能会对显示效果有所改善（由于 height 在 ckeditor 中已经写死了，高度并不会变化，但是会看起来舒服一点（不再强行拉伸））

btw，很感谢评课社区这个项目w

[bojieli]

fancybox 不错呀，我还不知道这个项目。

object-fit: contain 这个我还真不知道，刚试了一下，效果拔群。

[bojieli]

fancybox 里面，需要一个大图，一个小图，我们好像用户上传的就只有一个图（不会自动生成缩略图之类的），这样 big 和 small 设置成同一个是不是就行了……

[bojieli]

fancybox 我感觉是用来做 gallery 的，确实可以把多张图片变成一个 gallery，但是评课社区里面这种多张图的情况还是比较少见的吧，而且都是图文穿插的，只看图不看文字感觉也不太常见吧……

[liuly0322]

fancybox 我感觉是用来做 gallery 的，确实可以把多张图片变成一个 gallery，但是评课社区里面这种多张图的情况还是比较少见的吧，而且都是图文穿插的，只看图不看文字感觉也不太常见吧……

233 主要是功能比较全面，看上的还是那个点击放大图片的功能，不知道有没有类似的轻量级 jq 插件可以实现

主要痛点可能是有的手机浏览器必须新标签页打开/下载下来在相册才能看大图？这样的话有个图片放大功能可能会好一些

[bojieli]

有道理，放大图片是一个比较有用的功能， @jingning42 可以看下 fancybox 是否可以搞定。

[bojieli]

现在已经通过删除了图片强制设置的 height 和 width，图片采用原始大小显示，以免在移动端由于宽度不足，导致产生大量的上下空白。