Skip to content

Latest commit

 

History

History
87 lines (54 loc) · 3.89 KB

README-zh.md

File metadata and controls

87 lines (54 loc) · 3.89 KB

img-preview

Build Status NPM Download NPM Version NPM License PRs Welcome Automated Release Notes by gren

图片预览组件

Table of Contents

Feature

  • 参考 medium 实现
  • 自动适配屏幕大小
  • 小图不模糊,大图不溢出屏幕
  • 支持按 ESC 键关闭预览

⬆ Back to Top

Demo

⬆ Back to Top

Install

yarn add @femessage/img-preview

⬆ Back to Top

图片比例算法

当预览的图片原尺寸比较大的情况,需要把图片按比例预览

// x轴比例 = 窗口的宽 / 图片的宽
// y轴比例 = 窗口的高 / 图片的高
图片比例 = x轴比例 x 图片高度 > 窗口高度 ? y轴比例 : x轴比例

以下是公式说明:

  • 第一步,计算 x轴比例(浏览器窗口宽度与图片原本宽度的比例),并保存下来

image-20181210204220704

  • 第二步,考虑到在x轴比例下,有可能图片的高度比窗口的高度还大。

    这时应使用 y轴比例 (浏览器窗口高度与图片原本高度的比例)作为图片的预览比例

image-20181211141542119

⬆ Back to Top

Contributors

Thanks goes to these wonderful people (emoji key):

listars
listars

💻 📖 🤔
Donald Shen
Donald Shen

🐛 🚧
EVILLT
EVILLT

💻 🚧

This project follows the all-contributors specification. Contributions of any kind welcome!

⬆ Back to Top

License

MIT

⬆ Back to Top