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

Question

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

Answer 1

您可以使用样式表完成此操作。首先，定义以下样式：

.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，它没有。

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

感谢您的反馈，迪亚哥。

Answer 2

如果您只指定宽度或高度，但不能同时指定两者，那么您确实保留了纵横比，因此您可能会意外继承 awidth=100%或其他内容。使用 Firebug 或 Safari 的检查器检查元素。

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