Arbitrary image resizing to fit within arbitrary dimensions.
npm install @electrovir/resizable-image-elementArbitrary interactive resource resizing to fit within arbitrary dimensions. This original started as an image helper, but now it supports many file types including text, video, audio, etc.
Exports a native web element, VirResizableImage (for use in element-vir) or vir-resizable-image (for use as an HTML tag name) that accepts inputs of max dimensions and imageUrl. The element handles the rest!
- [x] constrains images to arbitrary dimensions while maintaining aspect ratio
- [x] works with SVGs and normal images
- [x] works with SVGs that have elements
- [x] works with SVGs that rely on elements without giving them access to the main window
- [x] works with "images" that are actually embedded HTML documents
- [x] tested in Safari, Chrome, and Firefox
- [x] fixes missing attributes on SVG images
- [x] handles viewBox attributes missing on the top SVG (but existing on a nested SVG element)
- [x] allows for arbitrary manipulation of SVG code to account for errors in the original SVG code
- [x] handles race conditions between loading the image and determining its size
- [x] handles the many race conditions between iframe loading and communicating back and forth wit them
- [x] handles audio files
https://electrovir.github.io/resizable-image-element
``bash`
npm i @electrovir/resizable-image-element
Meant for use with element-vir:
`TypeScript
import {html} from 'element-vir';
import {VirResizableImage} from '@electrovir/resizable-image-element';
export function createTemplate() {
return html
<${VirResizableImage.assign({
imageUrl: 'https://example.com/my-image-url',
max: {
height: 300,
width: 600,
},
min: {
height: 100,
width: 200,
},
})}>${VirResizableImage}>
;`
}
You can also use the tag name vir-resizable-image outside of element-vir but you may have to imperatively assign inputs to make that work.
To customize the loading placeholder, use slot="loading" on a child element:
`TypeScript
import {html} from 'element-vir';
import {VirResizableImage} from '@electrovir/resizable-image-element';
export function createTemplate() {
return html
<${VirResizableImage.assign({
imageUrl: 'https://example.com/my-image-url',
})}>
;
}
``