Chèn ảnh Scale toàn màn hình đơn giản với html và css

vntot hướng dẫn làm web

Chèn ảnh Scale toàn màn hình đơn giản với html và css. Cái này viết ra có thể khiến nhiều bác code chuyên nghiệp buồn cười nhưng sự thật là do sáng nay lúng túng cả buổi không biết làm sao để cái ảnh chèn vào web nó tự động kéo dãn toàn màn hình, loay hoay mãi cuối cùng mới chỉnh được nên mạo muội viết lại để hôm sau quên lại vào xem cho nhớ. ^^

Chèn ảnh Scale toàn màn hình đơn giản với html và css

Số là thế này. Mình chèn một cái ảnh vào web bằng cú pháp html thông thường: <img src=”link-anh”> nhưng do cái ảnh bé hơn chiều rộng web nên nó thừa một khoảng trắng rất xấu, mình muốn cái ảnh nó tự động kéo dãn ra vừa với khung web thì làm thế nào.

Có thể thêm thuộc tính width và height vào để kéo dãn ảnh nhưng vẫn là kích thước cố định, khi gặp màn hình máy tính quá lớn thì ảnh nó vẫn bị bé và chừa khoảng trống. Loay hoay mãi mới nhớ ra cái này:

<img width="100%" height="100%" src="link-anh">

Thế thôi ạ, chỉ cần thế là ảnh full tràn màn hình rồi. Quê quá hi hi, chủ yếu là viết để hôm sau cho nhớ thôi chứ cái này ai cũng biết rồi ạ.

Nếu muốn chèn ảnh nền sự scale toàn màn hình thì có thể thêm css như sau:

div#anhnen{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;} 

còn html thì khai báo là

<div id="anhnen"><img width="100%" height="100%" src="link-anh" /></div> 

Thế thôi ạ.

★★★ Thạch sanh (Vn tốt)
© www.vntot.com - Vui lòng ghi rõ nguồn vntot.com khi đăng tải lại nội dung trên website!

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

×

Mã giảm giá ứng dụng học tiếng Anh đỉnh của đỉnh XEM NGAY!