从 dataurl 获取图像的高度和宽度答案

【问题标题】：Get image height and width from a dataurl从 dataurl 获取图像的高度和宽度
【发布时间】：2015-09-04 15:34:43
【问题描述】：

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

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

【问题讨论】：

你可以，但是需要一些时间来获取图像的第二个副本，在加载后读取高度，然后修改你的 div 的样式。它在屏幕上可能非常华丽，硬编码是更好的用户体验。
好的。它实际上是真的。既然有问题，是否有任何方法可以使加载后的背景图像根据背景图像进行 div 缩放？
我不这么认为。走另一条路很容易（bg 适合 div）。您可以尝试一个非交互式的超大 div，它不会缩放图像并且在图像无法到达的地方是透明的。指针事件：无；
在 JavaScript 中，您可以将显示 div 缩放到您需要的大小。您只需将图像的高度和宽度从 PHP 传递给 JavaScript。但我相信你应该把图像渲染留给 PHP，除非你有一些华丽的 JavaScript。 .
或许使用PHP getimagesizefromstring从base-64字符串中获取图片的大小

标签： javascript php image

【解决方案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

【讨论】：