通过数据库插入的不同尺寸图像的宽度和高度 HTML 属性

Question

我有一个不同大小的图像库，其路径存储在数据库中。 使用 PHP 和 MySQL 存储过程获取图像。 我尝试使用 PHP 向<img>添加宽度和高度属性：

width="<?php list($width, $height) = getimagesize($row['modal_img_src']); echo $width; ?>"
height="<?php list($width, $height) = getimagesize($row['modal_img_src']); echo $height; ?>"

但这显然给了我内在的尺寸，而不是浏览器实际使用的尺寸。

我需要 JavaScript 让浏览器知道每个图像的实际使用的宽度和高度吗？

编辑：我也可以在数据库中存储每个图像的宽度和高度。（？）

Answer 1

目前还不清楚你的目标到底是什么。 浏览器通常可以很好地检测内在图像大小（添加它们的一个原因是在图像加载速度较慢时减少内容偏移）。

如果您想要显示图像的特定尺寸，无论其内在尺寸是什么，您都应该通过 CSS 将其卸载到浏览器。 指定诸如max-width 、 max-height之类的东西可能会让你到达你需要的地方。

或者，如果您想要更多控制权，您可以在非图像元素上使用 CSS background-image属性。 这允许您通过background-size控制它的缩放方式。

在我看来，这些解决方案中的任何一个都比在这种情况下使用 JS 更好。

同样为了完整起见，如果您最终使用get_image_size ，请务必只调用一次并检查其返回值。