javascript - 从 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