☰

在 HTML 中调整照片大小并保持纵横比

tag-icon • tag-icon images html
在 HTML 中调整照片大小并保持纵横比

我想显示我上传的照片（到我的 drupal 网站），我想让照片变小，但使用 heigh=100 不符合纵横比。我只想让照片变小。

答案1

如果您仅指定宽度或高度，而不是两者，则您确实会保留纵横比，因此您可能意外继承了width=100%或某些内容。使用 Firebug 或 Safari 的检查器检查元素。

如果您担心非 4:3 或 3:4 的照片（例如用户提交的全景图照片）会发生什么，那么您可以考虑在包含块上同时使用max-height和max-width，或者。overflow: none;

答案2

您可以使用样式表来实现这一点。首先，定义以下样式：

.thumb {
  max-width: 100px;
  max-height: 100px;
  width: expression(this.width > 100 ? "100px" : true);
  height: expression(this.height > 100 ? "100px" : true);
}

然后，将此样式添加到您的图像标签中，如下所示：

<img class="thumb" ...>

这次不包括height和元素。width

该样式的前半部分适用于支持max-width和max-height属性的浏览器 - Chrome、Firefox、Opera 和 Safari。后半部分是针对不支持和属性的 IE 的 hack。

来源：图片最大宽度和高度

感谢您的反馈，Diago。

答案3

如果您尝试显示缩略图，仅设置大小不是一个好主意。全尺寸图像仍会下载到用户计算机并在那里调整大小。这会占用他们的带宽和处理器能力，并使您的网站加载缓慢。更好的方法是创建合适大小的缩略图并上传。

如果您愿意的话，可以通过点击缩略图来加载全尺寸图像。

如果您确实想更改页面大小，则需要确保：

new_width = new_height * (old_width / old_height)

保持图像的纵横比。

尽管正如 dlamblin 指出的那样，只需改变一个值就可以保留纵横比。

答案4

孔波泽尔是一个可以自动完成此操作的所见即所得编辑器。您可以尝试一下。

相关内容