Comments (4)
Hey yea I definitely hear what you're saying. In the future we'll take a look at keeping the smaller images at their uploaded size. Thanks for the feedback and good luck!
from file-upload-with-preview.
You as well! Fun project. Always good to see people working in the community and sharing. Best, -C
from file-upload-with-preview.
Hi there - thanks for checking out the project.
I see what you're saying about not forcing an image that's smaller than the image preview pane to stretch to fill it.
Luckily I think the fix for this should be pretty simple. The image is stretching because of the background-size: cover;
property set on the .custom-file-container__image-preview
. How about you add the following code to your .css
stylesheet so it overwrites the repo's style.
.custom-file-container__image-preview {
background-size: contain;
/* You may want to add this too because the background of the image-preview container is set to a white color. */
background-color: #eee;
}
Try that and let me know how it goes.
from file-upload-with-preview.
Hi, much thanks for the note back. Welcome!
background-size: contain; will scale the uploaded image preview up so that each side is as large as possible while not exceeding the length of the corresponding side of the container. So if you are using this for one image and the container is 400px by 400px; Then the image will be scaled to that as well. Or if 200px by 300px then the image will be scaled to 200px by 200px. If the image is smaller than the container's smallest bounding side, it's likely to still scale up/blurry to fill to the length of that side.
The preview pane for use with one image would either need to shrink to fit the image size or the image would need to ignore the container size if the container size is fixed. And be centered.
Optimally a preview image for use with one uploaded image would be the size of the original image/keep it's dimensions unless larger than the container. Note: this isn't a problem with multiple files but only when using it on the single image upload. As the multiple creates really small preview images already.
But when using it for the one image upload/preview and using either background-size: cover; or background-size: contain; will still scale a smaller image size up to the preview container size/blurry/lose it's original size.
Anywho looks promising but we've gone in another direction, with something created in house.
Best,
-C
from file-upload-with-preview.
Related Issues (20)
- How to implement with Angular? HOT 2
- [FEATURE] Ability to set a "main image" HOT 2
- presetFiles doesn't work with base64 encoded binary image string HOT 4
- file-upload-with-preview & Compressor.js HOT 3
- How to access already added images while editing a form? HOT 2
- FileUploadWithPreview is not a constructor (extended with examples) HOT 2
- May I use html_form submit to backend? HOT 2
- how to capture the event with jquery? HOT 1
- There is no name attribute to get the image on backed HOT 4
- Beginner overloaded HOT 2
- Can I use this inside react [just react] ? HOT 2
- Name attribute not present in sending request to server. HOT 6
- file_upload_with_preview__WEBPACK_IMPORTED_MODULE_4__.FileUploadWithPreview is not a constructor HOT 4
- Use in Next js and Tailwind HOT 3
- bug on chooseFile label HOT 2
- Question: can I attach event to element, not to window? HOT 12
- Save in local storage HOT 2
- How to attach to previously initialized instance of FileUploadWithPreview? HOT 4
- How to dynamically click the clear button? HOT 1
- Added event confusion with presets and new add HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from file-upload-with-preview.