Having the source of an image as a dataurl, is there a way to get the image height and width either in javascript or PHP so that I can set these as properties of a div?
or is there a better way to make the div scale to the image size. Consider that the image is used as background-image property in the CSS of the div.
If you know the aspect ratio of the image then you can create a responsive <div> which 'mimics' the native <img> element as the page resizes.
For example if you have an image that is 300x180 - then the aspect ratio is
1 : 0.6
(180/300=0.6) This means if the image is 100% wide, then it is 60% high.
.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 this jsFiddle