2012-03-16 56 views
7

Tôi có hình ảnh và tôi muốn chiều rộng lấp đầy cửa sổ trình duyệt, bất kể kích thước của cửa sổ là bao nhiêu.Kéo hình ảnh để lấp đầy chiều rộng của cửa sổ trình duyệt

Làm cách nào để thực hiện điều này trong HTML và CSS?

+0

bản sao có thể có của [CSS hoặc hình nền có thể mở rộng jQuery với KHÔNG có khoảng trắng bên dưới khi chiều cao img nhỏ hơn chiều cao cửa sổ] (http://stackoverflow.com/questions/5072750/css-or-jquery-scalable-background- image-with-no-white-space-bên dưới-khi-img) – Joseph

Trả lời

5
<img src="filename.jpg" alt="alt text" width="100%" /> 

Giả định rằng vùng chứa của hình ảnh rộng bằng cửa sổ trình duyệt.

+1

điều này không hợp lệ đối với HTML 5. Trong HTML5, giá trị phải bằng pixel. – sbagdat

+0

@sbagdat Thú vị. Tôi không biết điều đó. Bất kỳ ý tưởng nào tại sao phần trăm đã bị xóa dưới dạng tùy chọn? –

+0

có thể khi hình ảnh đang ngày càng lớn hơn, chúng đang mất chất lượng. đây là liên kết w3c: http://www.w3schools.com/html5/att_img_width.asp – sbagdat

10

Bạn có thể thêm một div với chiều rộng một chiều cao của 100%, chiều rộng và chiều cao cũng thiết lập hình ảnh của 100%

<div id="wrapper"> 
    <img src="http://lorempixel.com/200/200" /> 
</div>​​​​​​​​​​ 

CSS:

#wrapper, img{ 
    width:100%; 
    height: 100%; 
} 

jsfiddle

1
<div class="fixpixel"> 
    <img src="ImagePath" /> 
</div>​​​​​​​​​​ 

Tệp CSS

.fixpixel img{ 
height: auto; 
background-position: center; 
background-repeat: no-repeat; 
background-size: cover; 
} 
Các vấn đề liên quan