ph101pp / jquery-cover Goto Github PK
View Code? Open in Web Editor NEWThis plugin mimics the CSS3 background-size:cover behavior.
Home Page: https://philippadrian.com/projects/jquery-cover
This plugin mimics the CSS3 background-size:cover behavior.
Home Page: https://philippadrian.com/projects/jquery-cover
Hi!
I don't know why this project has so few feedbacks, I've been using it for years (even now in VueJS projects, it's even simpler to load thanks to @load directive!) and it's amazingly useful ; SEO needs this for so many images. So I'll start by saying thanks for the work!
Just a quick fix suggestion in the CSS ; if you set width and height attributes on your image, the image ratio will be deformed (at least in "height" ratio display).
I fixed this that way in local:
.height.greenishCover img {
display:inline;
height:100%;
width:auto; <-------
margin-top:0 !important;
}
.width.greenishCover img {
display:block;
width:100%; <-------
height:auto;
}
Only flaw I found in years! ๐
Cheers!
This is the best plugin so far to tackle ie8.
However it would be even better to be able to use more precise background positions such as percentages.
Do you have any plans to do this with this plugin?
Trying to use your plugin with Bootstrap Carousel but only the first image is getting correct. All the others do not stretch to fill the container. Any known workaround?
Since the images used in the carousel have the same width and height, Is there any way for the plugin to receive that info using parameters so that they can be applied to the other images without recalculate.
In chrome the class swap sometimes doesn't trigger a redraw of the elements. Mostly when resizing the window height.
This leads to a stretched or compressed image. When triggering a redraw via console, the image jumps back into the correct place and proportions.
This only happens in chrome and is most likely due to the known redraw bug.. although I didn't find a solution against it yet. Most suggested solutions didn't work..
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.