將圖像調整爲div

我有一個以百分比作爲值的div，以及需要適合的圖像。應該調整寬度以適合div，而超過div的圖像的高度應該隱藏。將圖像調整爲div

（更清晰的視覺解釋） want

this is what I have so far（編輯：粘貼錯誤的鏈接，我的壞）

的HTML：

<div class="wrap"> 
    <img class="imgofcrap" src="http://physictourism.com/wp-content/uploads/2011/10/Grand-Canyon-National-Park-Arizona.jpg" /> 
</div>

的CSS：

div.wrap { 
width: 20%; 
height: 5%; 
overflow:hidden; 
     border: 2px solid black; } 

img.imgofcrap{ 
width: 100%; 
    height: auto; }

來源

2014-07-14 Gwen Wong

像這樣的事情？ [DEMO]（http://jsfiddle.net/Ruddy/5UJRB/5/）你也使用百分比作爲高度，但div沒有什麼可以獲得的高度。如果你想使用它，你需要設置'html，body {height：100％; }' – Ruddy

我喜歡你有你想要的手繪圖片。感謝您的努力。 – xDaevax

背景圖像會比內嵌圖像更好。 –

很簡單，你接近。

所以我們只是想使用img的width，所以我們將其設置爲100%。由於父母有width它會使用它。現在，您以百分比形式設置的父級爲height。但div沒有父母height。所以我們把它用：

html, body { 
    height: 100%; 
}

所以現在我們有：

html, body { 
    height: 100%; 
} 

div.wrap { 
    width: 20%; 
    height: 6%; 
    overflow:hidden; 
    border: 2px solid black; 
} 
img.imgofcrap { 
    width: 100%; 
}

Demo Here

來源

2014-07-14 14:53:08 Ruddy

對此更改：

img.imgofcrap{ 
    width: 100%; 
    height: auto; 
}

fiddle

還拿這裏The difference between width:auto and width:100%

來源

2014-07-14 14:44:11

這擴大了圖像。 OP希望隱藏溢出並保留大小。 – j08691

我的東西一看，所以你正在尋找一個負責任的形象。所以請cheack下面的jsfiddle URL

img.imgofcrap{ 
    max-width:100%; 
    height: auto; 
    display:block; 
}

JSFiddle Link

來源

2014-07-14 14:44:31

這會縮放圖像。 OP希望隱藏溢出並保留大小。 – j08691

你尋找一個背景覆蓋解決方案：如果你只需要使用像你一樣顯示有且只能在最新的瀏覽器我會去

<div class="wrap"></div> 



div.wrap { 
    width: 20%; 
    height: 5%; 
    overflow:hidden; 
    border: 2px solid black; 
    background: transparent url("http://physictourism.com/wp-content/uploads/2011/10/Grand-Canyon-National-Park-Arizona.jpg") center; 
    background-size: cover; 
}

小提琴here

如果您需要IE7 +支持我做了一個小項目，該項目涵蓋了 - 隨意使用或擴展到您的需求：

https://github.com/sp90/backgroundCover

來源

2014-07-14 14:46:41

將圖像調整爲div

回答

相關問題