使用瀏覽器調整圖像大小

我想在調整瀏覽器大小時調整圖像大小，但在此過程中，我希望在圖像的左側和底部都保留30px的邊框。像這樣：http://www.jennyvansommers.com/non-commissioned/corner/#347 有沒有簡單的方法來使用CSS來做到這一點？使用瀏覽器調整圖像大小

在此先感謝

來源

2012-06-09 Dean Pauley

我希望設置最小寬度和30像素最小高度，以50％的相對寬度和hiehgt或任何相對大小，你想會達到這種效果

.image-resize { 
    min-hieght:30px; 
    min-width:30px; 
    height:50%; 
    width:50%; 
}

很抱歉誤解你的問題，有邊界嗎？或保證金？所以像財產以後

margin-left:30px; 
margin-bottom:30px;

，而不是高度和寬度，可以使用左邊框和底部邊框我想用透明的邊界，但我perfer保證金。但我認爲相對大小是你想要的？所以它調整與瀏覽器，或實際調整相對於其父母，所以取決於它在dom中存在的位置

來源

2012-06-09 12:47:30 PJUK

感謝您的迴應，它不是我希望是最小30px的圖像，它是下面的邊框，並在左邊我希望總是30px的圖像，就像上面的鏈接一樣。 –

在那裏編輯，誤解邊界部分抱歉，相對定位可能是您想要的，如果您只定義高度或寬度，則寬高比將保持不變 – PJUK

我會嘗試把圖像放在一個容器內，具有100％寬度和高度的容器，左邊和底部30px，其中的圖像也有100％的寬度和高度。

<div id="imageWrapper"> 
    <img src="imageurl" /> 
</div> 

<style> 
    #imageWrapper{width:100%;height:100%;padding:0 0 30px 30px} 
    #imageWrapper img{width:100%;height:100%;} 
</style>

該包裝應該填充窗口，並且圖像應該充滿包裝出到填充。儘管如果圖像的形狀與窗口的形狀不同，這很可能會拉伸您的圖像。如果你想保持圖像的高寬比，只需設置img的寬度或高度，但不能同時設置。

希望這有助於:)

編輯：不知道，如果你想填補屏幕，與IMG {最大寬度玩：100％和IMG {最大高度：100％，而不是寬度和高度如果你想圖像保留它的自然尺寸，除非窗口比它小。

來源

2012-06-09 13:21:23 ConorLuddy

使用瀏覽器調整圖像大小

回答

相關問題