Html/Css - Làm thế nào để có được một hình ảnh để kéo dài 100% chiều rộng của một container sau đó hiển thị một hình ảnh trên nó?

Tôi đang vật lộn với cách bố trí của tiêu đề tôi có trong tâm trí với nhau.Html/Css - Làm thế nào để có được một hình ảnh để kéo dài 100% chiều rộng của một container sau đó hiển thị một hình ảnh trên nó?

Đây là html cho đến nay:

<div id="header"> 
    <img src="/img/headerBg.jpg" alt="" class="headerBg" /> 
    <a href="/"><img src="/img/logo.png" alt="Logo" class="logo" /></a> 
    <div id="loginBox"> 
     other code 
    </div> 
</div>

Và css cho đến nay:

#header { 
    height: 130px; 
    margin: 5px 5px 0 5px; 
    border: #0f0f12 outset 2px; 
    border-radius: 15px; 
} 

#loginBox { 
    float: right; 
    width: 23.5%; 
    height: 128px; 
    font-size: 75%; 
} 

.headerBg { 

} 

.logo { 
    width: 50%; 
    height: 120px; 
    float: left; 
    display: block; 
    padding: 5px; 
}

Những gì tôi đang cố gắng để đạt được, là có hình ảnh "headerBg.jpg" hiển thị đến 100 % width của div "header", về cơ bản nó sẽ là nền của div. Sau đó, có hình ảnh "logo.png" và div "loginBox" hiển thị ở trên "headerBg.jpg".

Biểu trưng phải được thả nổi ở đầu bên trái và hộp đăng nhập được lưu hành ở phía xa bên phải như trong css.

Với hình ảnh bị xóa, logo và div được đặt chính xác, nhưng khi hình ảnh được giới thiệu, hai mục nổi được đặt sau hình ảnh trong luồng.

Tôi đã thử các bổ sung và cấu hình lại khác nhau nhưng không ai đã chứng minh được cách làm việc theo cách tôi muốn.

Tôi đã thêm hình ảnh trong css làm nền cho div tiêu đề, nhưng nó không kéo dài 100% theo cách đó.

Có ai có thể cung cấp một số thông tin chi tiết về điều này không?

Ngoài ra mọi hướng dẫn bao gồm những thứ như thế này sẽ là một bổ sung tuyệt vời cho bộ sưu tập của tôi!

Cảm ơn bạn!

Nguồn

2012-04-14 Craig van Tonder

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Render this</title> 
    <style type="text/css"> 
#header { 
    position:relative; 
    height: 130px; 
    margin: 5px 5px 0 5px; 
    border: #0f0f12 outset 2px; 
    border-radius: 15px; 
} 

#loginBox { 
    position:relative; 
    float: right; 
    width: 23.5%; 
    height: 128px; 
    font-size: 75%; 

} 

.headerBg { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    z-index: -1; 
} 

.logo { 
    position:relative; 
    width: 50%; 
    height: 120px; 
    float: left; 
    display: block; 
    padding: 5px; 
} 
    </style> 
</head> 
<body> 
<div id="header"> 
    <img src="img/headerBg.jpg" alt="" class="headerBg" /> 
    <a href="/"><img src="img/logo.png" alt="Logo" class="logo" /></a> 
    <div id="loginBox"> 
     other code 
    </div> 
</div> 

</body> 
</html>

Nguồn

2012-04-14 21:50:49 chadpeppers

nhờ cho câu trả lời của bạn, nhưng điều này không giải quyết được vấn đề cho tôi. Tôi đã thử điều này nhưng khi hình ảnh rộng 1084px, khi độ phân giải màn hình tăng lên lớn hơn, nó không chiếm toàn bộ chiều rộng của vùng chứa, trong trường hợp này là 'tiêu đề' khi nó tăng để khớp với chiều rộng màn hình.Đó là lý do tại sao tôi đã chọn để có hình ảnh trong mã để có thể kéo dài nó. –

sử dụng kích thước nền: 100% 100%; – chadpeppers

Đó là css3 và không phải là rất thân thiện với trình duyệt:/Đó là lý do tại sao tôi đã cố gắng tìm một cách để thay đổi kích thước hình ảnh mà không cần sử dụng đến điều đó. –

Chỉ cần đặt nền tiêu đề hình nền thực của div đó. Float không bỏ qua các đối tượng khác theo cách mà vị trí: tuyệt đối thực hiện.

#header { 
    height: 130px; 
    margin: 5px 5px 0 5px; 
    border: #0f0f12 outset 2px; 
    border-radius: 15px; 
    background: url(headerBg.jpg); 
}

Nguồn

2012-04-14 21:51:26 mxniu

Xin chào và cảm ơn, nhưng điều này không cho phép tôi kéo giãn hình ảnh để vừa với chiều rộng của một div đàn hồi. –

.header { 
    position: relative; 
} 

.headerBg { 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    width: 100%; 
}

Lưu ý rằng điều này sẽ mở rộng hình ảnh để phù hợp với chiều rộng của <div>; nếu bạn chỉ muốn nó thay đổi kích thước theo chiều ngang thì bạn nên đặt chiều cao một cách rõ ràng.

Bạn cũng có thể thử max-width: 100%; nếu bạn chỉ muốn hình ảnh mở rộng trên cửa sổ lớn.

Nguồn

2012-04-14 22:22:30 Neil

Đặt lớp div sẽ không hiển thị thêm bất kỳ phần nào.

div { 
overflow: hidden; 
}

Nguồn

2013-06-17 04:47:47 fahomid

Các thiết lập này làm việc hoàn hảo cho tôi .. nó sẽ kích thước ur ảnh cho tất cả các bức ảnh ..

#headerBg { 
position: absolute; 
top: 0px; 
left: 0px; 
right: 0px; 
width: 100%; 
height: 100%;

}

Nguồn

2015-05-04 06:45:27 NICK

-1

hãy thử sử dụng trong css của bạn:

max-height:100%;

Nguồn

2017-02-22 06:22:29

Html/Css - Làm thế nào để có được một hình ảnh để kéo dài 100% chiều rộng của một container sau đó hiển thị một hình ảnh trên nó?

Trả lời

Các vấn đề liên quan