从数据URL中获取图像的高度和宽度

Question

如果有一个图像的数据URL作为源，是否有一种方法可以在JavaScript或PHP中获取图像的高度和宽度，以便我可以将这些设置为div的属性？

还是有更好的方法使div按比例缩放到图像大小。考虑到图像被用作div的CSS的background-image属性。

- Fabrizio Mazzoni

---

你可以这样做，但获取第二份图像需要一些时间，读取其高度后再修改div的样式。这可能会在屏幕上产生闪烁效果，硬编码是更好的用户体验。 - dandavis

好的。这实际上是真的。就像问题所述，是否有任何方法让div根据加载后的背景图缩放？ - Fabrizio Mazzoni

我不这么认为。反过来很容易（将背景适应到div中）。您可以尝试使用非交互式的超大div，它不会缩放图像，并且在图像未覆盖的区域是透明的。pointer-events:none; - dandavis

在 JavaScript 中，您可以将显示 div 缩放为所需大小。您只需要将图像的高度和宽度从 PHP 传递到 JavaScript 即可。但是，除非您有一些华丽的 JavaScript，否则我认为您应该将图像渲染留给 PHP。 - Twister1002

这正是我正在寻找的。似乎找不到从PHP获取图像属性的方法。或者也可以从PostgreSQL中获取，因为数据存储在PG的文本字段中。 - Fabrizio Mazzoni

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Yogi

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。

- Jackson