如何使用CSS設置圖像的寬度和高度100％？

Question

我的代碼：

background:url(images/menu_edu.jpg) no-repeat;

但是只顯示一半的圖像。

Answer 1

具有背景的元素必須是圖像的大小。

即flower.jpg = 255px x 55px

<div class="flower">
    Some text
</div>

.flower {
    background: url(flower.jpg) no-repeat;
    width: 255px;
    height: 55px;
}

如果使用背景，則無法將元素的大小設置為圖像的尺寸。 您可以使用javascript來計算尺寸。

或者，如果需要重復圖像，則可以在背景標簽上使用repeat，repeat-x或repeat-y。

Answer 2

您沒有顯示足夠的代碼，但是如果背景圖像位於body元素中，則可能未在整個視口中延伸。

嘗試

html, body { min-height: 100% }

Answer 3

如果您只想顯示圖像，IMG標簽將更加有用和有效……（並且可以將其設置為width（/＆）height = 100％）。

Answer 4

如果要以全尺寸顯示圖像，則無需為此使用CSS

不要給<img>標簽賦予height和width屬性，就像<img src="this.jpg" /> ，它將以完整尺寸顯示

但是，如果您希望<div>以全尺寸顯示其背景，那么除了分配確切的圖像尺寸外別無選擇