通過高度和寬度限制圖像

Question

我遇到問題，無法通過寬度或高度限制我的圖像，無論哪個超過限制。

例如，我上傳的某些圖片大於450px，而其他圖片則大於450px。 如何設置它們，使寬度和高度都不會超過450px。

這是很基本的事情，但是我不知道該怎么做，我非常感謝您的幫助！

編輯：我希望這可以用CSS HTML解決，這就是為什么我沒有提到語言，但是如果它是一個更復雜的解決方案，那么我正在使用流星..因此javascript和jquery。

Answer 1

使用max-width和max-height CSS屬性（ 並且不要在img標簽上設置width / height屬性 ）

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

請記住，這在顯示圖像時適用。 如果要限制圖像的實際寬度/高度以節省服務器上的空間，則必須考慮上傳帶有縮小圖像選項的插件。

Answer 2

另一種選擇是像這樣“裁剪”圖像：

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

這將從左上角裁剪，這可能是您想要的，也可能不是。

Answer 3

您可以使用圖像style屬性：

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

Answer 4

簡單的HTML

<img src="xyz.jpg" alt="Its You" height="200px" width="200px">