限制图片的高度和宽度

Question

我遇到了一个问题，无法限制我的图像的宽度或高度，无论哪个超过了限制。有些图片我上传的高度超过了450像素，而有些图片的宽度超过了450像素。如何设置它们，使宽度和高度都不超过450像素。这是一个非常基本的事情，但我不知道怎么做，我感激任何帮助！编辑：我希望可以通过CSS HTML解决这个问题，这就是为什么我没有提到语言，但如果需要更复杂的解决方案，那么我正在使用Meteor..所以需要使用JavaScript和jQuery。

- socialight

---

你有尝试过任何东西吗？你还没有告诉我们你使用什么编程语言来接收上传的内容。或者你只是想用CSS来限制它们吗？ - Mark Buffalo

我希望这可以通过css html解决，所以我没有提到，但如果需要更复杂的解决方案，那么我会使用Meteor..因此使用Javascript和JQuery。谢谢！ - socialight

用CSS解决这个问题会很困难。在CSS中没有真正的调整大小；您仍然拥有相同的图像内容。例如，假设您上传了一张3840x2160像素的图像...如果您将其在CSS中或服务器端上调整大小为450x450，它将会变形。但是，使用CSS，每次都会下载一个更大的图像。如果有很多这些图像，这可能会对服务器或查看呈现页面的用户造成压力。通常人们为此创建缩略图。 - Mark Buffalo

嗨，Eduardo，感谢你的帮助。已经有两个答案了，得票最高的一个解决了这个问题！ - socialight

是的，请检查答案。但请阅读我关于调整图像大小的最后一篇帖子。您不希望页面上到处都是未缩略的大文件。这可能适用于您，也可能不适用。 - Mark Buffalo

Answer 1

使用 max-width 和 max-height CSS 属性（不要在 img 标签上设置 width/height 属性）

img{
    max-width:450px;
    max-height:450px;
}

请牢记，这仅适用于显示图片。如果您想限制图像的实际宽度/高度以节省服务器空间，您将需要寻找具有缩小图像选项的上传插件。

- Gabriele Petrioli

Answer 2

你可以使用图像的 style 属性：

<img style="max-width: 450px; max-height: 300px" src="image.png"/>

- Felipe

Answer 3

另一种选择是像这样“裁剪”图像：

<div style="max-height:450px; max-width:450px; overflow: hidden">
   <img src="myImage.png" />
</div>

这将从左上角裁剪，这可能是您想要的，也可能不是。

- Mister Epic

Answer 4

简单的HTML

<img src="xyz.jpg" alt="这是你" height="200px" width="200px">

- Crime_Master_GoGo