Tiếp theo bài hôm nay chúng ta sẽ tim hiểu về HTML Stretch Background Image.

CSS3 giới thiệu một thuộc tính mới background-size cho phép bạn thay đổi kích thước của hình ảnh nền. Điều đó có nghĩa là bạn có thể kéo dài hình ảnh của bạn theo chiều ngang, chiều dọc, hoặc cả hai. Bạn có thể thay đổi kích thước bất kỳ cách nào bạn muốn.

Trong ví dụ sau đây, chúng tôi sử dụng  background-size với một giá trị 100% 100%.

e1

e3

Trải dài các hình ảnh nền cho cả trang

Ví dụ trên sử dụng một hình nền áp dụng đối với một phần tử <div>. Kết quả là ảnh kéo dài để lấp đầy toàn bộ trang.

e2

e4

Tăng kích thước theo tỷ lệ

Sử dụng background-size: cover

Bạn có thể sử dụng background-size: cover để mở rộng hình ảnh, trong khi vẫn giữ tỷ lệ khía cạnh nội tại của nó.

Sử dụng tùy chọn này sẽ đảm bảo rằng hình ảnh không bị kéo giãn ra khỏi tỷ lệ dẫn đến biến đổi hình. Hãy nhớ, các phần của hình ảnh có thể được ẩn, nếu các yếu tố có tỷ lệ khác nhau về hình nền của nó.

e5

e6

Sử dụng background-size: contain

Bạn có thể sử dụng background-size: contain để mở rộng hình ảnh, trong khi vẫn giữ tỷ lệ khía cạnh nội tại của nó, với kích thước lớn nhất sao cho cả chiều rộng và chiều cao của nó có thể phù hợp trong khu vực vị trí background.

e7

e8

Xem thêm:

Còn nhiều bài viết hữu ích tại thiết kế web các bạn đón đọc nhé.

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 *