固定尺寸容器中的不同圖像尺寸

Question

我在用戶上傳圖像以保持其縱橫比但不超過200像素寬或200像素高后重新調整圖像大小。

然后，我在ASP.Net Image控件中顯示圖像。 如何防止圖像影響周圍的元素？ 我嘗試設置控件的Width屬性和Height屬性，但這只是調整圖像本身的大小。 有沒有辦法將控件包裝在具有固定寬度/高度的div ？

非常感謝

Answer 1

一種方法是根據寬高比調整圖像大小，但留一個邊框以填充200x200尺寸。 然后可以將其以相同的尺寸嵌入頁面中，而不會影響布局。

另外，您可以將周圍div的overflow屬性設置為hidden，然后將div設置為Width/Height 。 但是，這取決於如何看待它。 就像是：

<div style="overflow: hidden; width: 200px; height: 200px">
   ...
</div>

如果您實際上要說的是要完全顯示200px x 400px的圖像，則只需將Width設置為200px 。