@femessage/img-preview

[![Build Status](https://travis-ci.com/FEMessage/img-preview.svg?branch=master)](https://travis-ci.com/FEMessage/img-preview) [![NPM Download](https://img.shields.io/npm/dm/@femessage/img-preview.svg)](https://www.npmjs.com/package/@femessage/img-preview)

Usage no npm install needed!

<script type="module">
  import femessageImgPreview from 'https://cdn.skypack.dev/@femessage/img-preview';
</script>

README

img-preview

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

Picture preview component

中文文档

Table of Contents

Feature

  • Implementation like medium
  • Automatically adaptation screen size
  • The small picture is not vague, the big picture does not overflow the screen
  • Support Press ESC Key to off preview

⬆Back to Top

Demo

⬆Back to Top

Install

yarn add @femessage/img-preview

⬆Back to Top

Picture Preview Algorithm

When the original size of the preview picture is relatively large, you need to preview the picture proportionally.

// X-axis ratio = width of the window / width of the image
// Y-axis ratio = height of the window / height of the picture
// Image ratio = x-axis ratio * (picture height > window height ? y-axis ratio: x-axis ratio)

Here's more details of the formula:

  • Step 1, calculation x-axis ratio (The ratio of the browser window width to the original width of the picture) and save it

WechatIMG5.jpeg

  • The second step, considering x-axis ratio below, it is possible that the height of the picture is larger than the height of the window.
    At this time should use y-axis ratio (The ratio of browser window height to the original height of the picture) as the preview ratio of the picture

WechatIMG61.jpeg

⬆Back to Top

Contributors

listars
listars
💻 📖 🤔		Donald Shen
Donald Shen
🐛 🚧		EVILLT
EVILLT
💻 🚧

Thanks goes to these wonderful people ( Emoji key ):
This project follows All-contributors Specification. Contributions of any kind welcome!

⬆Back to Top

License

MIT

⬆ Back to Top