根據圖像方向改變div大小

我一直在爲我的應用製作網頁登陸頁面，但它不斷壓縮風景圖像並思考它的肖像。我想要div自動調整圖片，所以如果高度大於寬度，那麼div應該適應圖片的大小。我怎麼能這樣做。根據圖像方向改變div大小

示例代碼的我用來顯示圖像：

<div id="favphoto">    
    <a href="/event/%event%/photo/%id%.jpg" target="_blank"> 
     <img border="0" src="/event/%event%/photo/%id%.jpg" /> 
    </a> 
</div>

我想讓DIV自動大小被調用正確的圖像，如果沒有我只是要對此錯誤的。

來源

2013-10-04 Nick Hazrd

我不是一定要了解，但你有CSS的最小寬度，最小高度或設置寬度/高度爲自動。也許這可以幫助。 –

您是否有任何示例代碼是您正在嘗試的內容，如果有，請將其發佈，它將有助於提供一個更好的解決方案，而不僅僅是一個通用的開放式問題。 – tremor

默認情況下DIV會一直延伸到整個屏幕。你必須有一些CSS或一些父容器造成這種情況。 –

將div設置爲display:inline-block將導致它只與內容一樣寬。

JSFiddle Example

<div class="favphoto">    
    <a href="#" target="_blank"> 
     <img border="0" src="http://lorempixel.com/400/200/sports/" /> 
    </a> 
</div> 

<div class="favphoto">    
    <a href="#" target="_blank"> 
     <img border="0" src="http://lorempixel.com/200/400/sports/" /> 
    </a> 
</div> 

.favphoto { 
    display:inline-block; 
    vertical-align:top; 
} 

.img { 
    display:block;

}

來源

2013-10-04 21:53:26

謝謝你的工作，非常感謝你們的幫助 –

根據圖像方向改變div大小

回答

相關問題