从dataurl获取图像高度和宽度

Question

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.

Answer 1

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