配售圖像一個div內部在HTML 5

我的簡單div元件是如下：配售圖像一個div內部在HTML 5

<div class="avatar"> 
    <img src="http://quickshare.my3gb.com/download/testpic.jpg" /> 
</div>

（原始圖像是216×216像素） 和我的CSS如下，

.avatar { 
float: right; 
border: 1px #ccc solid; 
width: 70px; 
height: 80px; 
overflow: hidden; 
position: absolute; 
}

和提琴，http://jsfiddle.net/BMU4Y/2/

的問題是，我不能讓圖像以適合在d iv它駐留在哪裏。

任何幫助將不勝感激。 [我也嘗試了jQuery的圖像縮放器，但沒有找到任何東西，真正起作用:(]

請注意，這是我的HTML 5的網站正在使用C＃構建和MVC 4

來源

2013-10-15 now he who must not be named.

此處不需要溢出，而且，使圖像適合DIV，它應該有100％HEIGH和寬度。

.avatar { 
float: left; 
border: 1px #ccc solid; 
width: 70px; 
height: 80px; 
position: relative; 
} 
.avatar img { 
    width: 100%; 
    height: 100%; 
}

http://jsfiddle.net/BMU4Y/3/

來源

2013-10-15 11:08:04 larssy1

我不認爲'height'屬性需要進行設置，我想這是自動默認情況下，如果'width'設置爲'100％'的高度應根據所採用的寬度進行縮放。 +1雖然 – Cyclonecode

你是對的，不需要設置兩個值。 – larssy1

爲什麼浮動？我不認爲這是TO的意圖... – HimBromBeere

就在增加。 css文件

.avatar img{ 
    width:100%; 
height:100%; 
}

來源

2013-10-15 11:07:42

如果我是正確的，你想要的形象適合您的明確大小專區內的瞭解，然後添加以下到你的CSS將使其工作：

.avatar img { 
    height: 100%; 
    width: 100%; 
}

來源

2013-10-15 11:08:54

.avatar 
    { 
     float: left; 
     border: 1px #ccc solid; 
     overflow: hidden; 
     width:60px; 
     height:60px; 
    } 

    .avatar img { 
     width:inherit; 
     height:inherit 
    }

來源

2013-10-15 11:09:28

？圖像是否自動調整爲60 * 60？ –

如果將化身div的高度更改爲100和100，則圖像大小調整爲100，所以是的，圖像會隨着div的寬度和高度而縮放。 –

+1。謝謝。所以，我假設，正如另一位海報所說，「width：inherit'和'width：100％'做同樣的工作？ –

試試這個.. 。

.avatar { 
float: left; 
border: 1px #ccc solid; 
width: 70px; 
height: 80px; 
overflow: hidden; 
position: relative; 
} 

.avatar img { 
max-width:100%; 
height:100%; 
}

來源

2013-10-15 11:10:09

.avatar img { 
    width: 100%; 
    height: auto; 
    display: block; 
}

您需要的圖像在顯示塊，而不是內聯是默認。然後給它100％的寬度（其父寬度），但對於我已經設置爲自動的高度。不是100％，因爲它會在兩個維度上拉伸，通常會產生奇怪的結果。

來源

2013-10-15 11:13:17 MentalRay

謝謝你。但是，將其設置爲「阻止」有什麼意義？（對不起，如果這是一個愚蠢的問題，我是新的，並試圖瞭解） –

塊元素，可以有尺寸，邊距，填充等這些是建築目的的元素。內聯元素主要用於演示。就像文本等等，我建議display：block，以保證安全，因爲我不知道在你的css代碼之前你還有什麼。此外，通過製作顯示塊img標籤，您可以修復像圖片下方的邊距等煩人的縫隙。 – MentalRay

將div的寬度和高度傳遞給Image。在CSS下面添加，它會像魅力一樣工作。

小提琴：http://jsfiddle.net/BMU4Y/8/

.avatar { 
float: left; 
border: 1px #ccc solid; 
width: 70px; 
height: 80px; 
overflow: hidden; 
position: relative; 
} 
div.avatar img 
{ 
    width:inherit; 
    height:inherit 
}

來源

2013-10-15 11:14:04 vendettamit

配售圖像一個div內部在HTML 5

回答

相關問題