Get image height and width from dataurl
Having the source of the image as dataurl, is there a way to get the height and width of the image in javascript or PHP so that I can set them as div properties?
or is there a better way to make the div the size of the image. Note that the image is used as a property background-image
in the CSS div.
+3
source to share
1 answer
If you know the aspect ratio of an image, you can create a responsive <div>
one that "mimics" its own element <img>
when the page is resized.
For example, if you have a 300x180 image - then the aspect ratio is
1: 0.6
(180/300 = 0.6) This means that if the image is 100% wide, then it is 60% taller.
.image {
background-image: url(http://lorempixel.com/output/nature-q-c-300-180-1.jpg);
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 60%;
}
See jsFiddle
+1
source to share