huiseoul / React Native Fit Image
Licence: other
Responsive image component to fit perfectly itself.
Stars: ✭ 539
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Native Fit Image
React Native Scalable Image
React Native Image component which scales width or height automatically to keep the original aspect ratio
Stars: ✭ 241 (-55.29%)
Mutual labels: image, component, responsive
Imgnotes
Extension of the jQuery imgViewer plugin to add markers and notes to the image
Stars: ✭ 98 (-81.82%)
Mutual labels: image, responsive
React Background Slideshow
Sexy tiled background slideshow for React 🔥
Stars: ✭ 98 (-81.82%)
Mutual labels: image, component
Imgviewer
jQuery plugin to zoom and pan images, even those with a size that is a percentage of their container
Stars: ✭ 50 (-90.72%)
Mutual labels: image, responsive
Jekyll Cloudinary
Jekyll plugin adding a Liquid tag for Cloudinary, for better responsive images
Stars: ✭ 79 (-85.34%)
Mutual labels: image, responsive
Image Focus
A dependency free utility for cropping images based on a focus point ~2.13kB gzipped
Stars: ✭ 134 (-75.14%)
Mutual labels: image, responsive
Vue Product Zoomer
Zoom Prodct Image, useful for e-shop website
Stars: ✭ 248 (-53.99%)
Mutual labels: image, responsive
Croppr.js
A vanilla JavaScript image cropper that's lightweight, awesome, and has absolutely zero dependencies.
Stars: ✭ 294 (-45.45%)
Mutual labels: image, component
React Responsive Image
🖼️ A React responsive image component.
Stars: ✭ 36 (-93.32%)
Mutual labels: image, responsive
Element Queries Spec
A spec for a Container-Style Element Query Syntax
Stars: ✭ 375 (-30.43%)
Mutual labels: component, responsive
React Responsive Picture
A future-proof responsive image component that supports latest Picture specification
Stars: ✭ 91 (-83.12%)
Mutual labels: image, responsive
Vue Picture Input
Mobile-friendly picture file input Vue.js component with image preview, drag and drop, EXIF orientation, and more
Stars: ✭ 862 (+59.93%)
Mutual labels: image, component
Vue Breakpoints
🍬 🙈 Vue.js utility component to show and hide components based on breakpoints
Stars: ✭ 179 (-66.79%)
Mutual labels: component, responsive
Glightbox
Pure Javascript lightbox with mobile support. It can handle images, videos with autoplay, inline content and iframes
Stars: ✭ 702 (+30.24%)
Mutual labels: image, responsive
Silentbox
A lightbox inspired Vue.js component.
Stars: ✭ 196 (-63.64%)
Mutual labels: image, component
Guillotine
jQuery plugin to crop images within an area (fully responsive), allowing to drag (touch support), zoom and rotate.
Stars: ✭ 318 (-41%)
Mutual labels: image, responsive
React Native Fit Image
React Native Fit Image enables you to draw responsive image component.
Introduction
Responsive image component to fit perfectly itself.
Install
npm install react-native-fit-image --save
Usage
import FitImage from 'react-native-fit-image';
// custom styles for FitImage
var styles = StyleSheet.create({
fitImage: {
borderRadius: 20,
},
fitImageWithSize: {
height: 100,
width: 30,
},
});
// draws image to fit inherited space automatically, even when screen is rotated.
// even you don't need to provide original size in v1.2.0
<FitImage
source={{ uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png' }}
style={styles.fitImage}
/>
// draws image to fit inherited space automatically and disables loading indicator
<FitImage
indicator={false} // disable loading indicator
indicatorColor="white" // react native colors or color codes like #919191
indicatorSize="large" // (small | large) or integer
source={{ uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png' }}
style={styles.fitImage}
/>
// draws image to fit inherited space automatically, even when screen is rotated.
<FitImage
source={{ uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png' }}
originalWidth={400}
originalHeight={400}
style={styles.fitImage}
/>
// could use resizeMode
<FitImage
resizeMode="contain"
source={{ uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png' }}
/>
// or draws image to specific size like Image component.
<FitImage
source={{ uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png' }}
style={styles.fitImageWithSize}
/>
// draws local image (currently, it does not support responsive)
<FitImage
source={require('fit-image.png')}
style={styles.fitImageWithSize}
/>
Example
- See a FitImageExample.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].