固定大小的容器中的不同圖像大小

Question

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

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

非常感謝

Answer 1

一種方法是基於寬高比調整圖像大小，但爲了填補200×200大小留下一個邊界。然後，這可以嵌入到具有相同尺寸的頁面中，而不會影響佈局。

或者你可以設置你的周圍div隱藏的overflow屬性，並設置divWidth/Height。但是，這取決於如何看待它。喜歡的東西：

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

如果你實際上是在說你想要的圖像尺寸200px X 400px全部顯示 - 只需要設置Width到200px。