最近升级Simple Lightbox插件到最新版,结果发现,有些图片被拉伸到非正常尺寸。如下图:
研究了下发现,simple Lightbox新版本对图片的最低高度设置为200px,而又没有详细的制定图片的高度,让图片自行调整到容器的100%高度,所以,图片被拉伸到非正常尺寸:
1 2 3 4 5 6 | /* line 180, simple-lightbox/themes/default/css/style.scss */ #slb_viewer_wrap .slb_theme_slb_default .slb_content { min–width: 200px; min–height: 200px; position: relative; } |
所以,如果发布的图片高度小于200px,又实用了simple lightbox,那么高度必然被拉伸到200px,图片的高度越小,拉伸越严重。实验图片高度为30px,所以看起来非常奇怪。
注释掉min–width:200px,或者直接删除后即可。效果如下:
同样道理,从CSS设置中,我们可以看到,如果图片的宽度小于200px,那么同样会在横向上被拉伸,如下图(正常图片尺寸为100×200),最终宽度由100px被拉伸到了200px:
所以,为了避免问题,可以直接把这两行内容全部注释或者删除,避免不必要的问题。