从dataurl获取图像高度和宽度

Question

有一个图像的源作为dataurl，有没有办法在javascript或PHP中获取图像的高度和宽度，以便我可以将它们设置为div的属性？

或者是否有更好的方法使div缩放到图像大小。 考虑到图像在div的CSS中用作background-image属性。

Answer 1

如果您知道图像的宽高比，那么您可以创建一个响应式<div> ，当页面调整大小时，它会“模仿”本机<img>元素。

例如，如果您的图像是300x180 - 则纵横比为

1：0.6

（180/300 = 0.6）这意味着如果图像是100％宽，那么它是60％高。

.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%;
}

看到这个jsFiddle