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

Question

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

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 让浏览器知道每个图像的实际使用的宽度和高度吗？

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

标签： javascriptphphtmlcss

Answer 1

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

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

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

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

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