Chèn (Nhúng) Video vào website giữ đúng tỉ lệ

Chèn (Nhúng) Video vào website giữ đúng tỉ lệ

css

Khi chèn video vào website, các theme có thể đã có css cài đặt cho video luôn giữ đúng tỉ lệ khi website hiển thị ở những màn hình khác nhau. Tuy nhiên, nếu bạn dùng mã nhúng <iframe ></iframe> thì bạn sẽ phải quy định chiều cao và chiều ngang cho khung video (<iframe src=”url” width=”chieu-ngang” height=”chieu-cao”></iframe>). Như vậy, khi áp dụng responsive cho thuộc tính này (thu nhỏ màn hình thiết bị và chiều ngang của video bị thu nhỏ để không vỡ khung website), vô hình chung thay đổi tỉ lệ giữa chiều cao và chiều ngang của khung video (vì khi màn hình thu nhỏ, chiều cao khung video không thay đổi). Vậy giải quyết như thế nào?

Chèn (Nhúng) Video vào website giữ đúng tỉ lệ

Để video luôn giữ đúng tỉ lệ khi co kéo màn hình thiết bị, ta sử dụng đoạn css như sau

.embed-responsive {
  position: relative;
  display: block;
Xem tiếp nội dung

Chèn ảnh nền Full màn hình với Html và CSS

Chèn ảnh nền Full màn hình với Html và CSS

css, Html

Đặt ảnh Background full màn hình

Đối với một số bạn đã biết về css thì sẽ biết, khá đơn giản để đặt hình nền cho một đối tượng bất kì, chỉ cần sử dụng thuộc tính background cho thẻ đó là được. Ví dụ đặt ảnh cho toàn trang

body {
  background: url(địa chỉ ảnh);
}

nhưng như đoạn mã trên thì ảnh sẻ chỉ nằm ở một góc mà chứ không tràn ra toàn trang web, một số bạn thì thường cho thêm thuộc tính repeat vào nữa thì ảnh sẽ lặp lại the chiều ngăng chiều dọc gì đó, một số bạn lại kiếm một ảnh cỡ đại bự để chèn vào.

Nhưng kiểu nào cũng vậy mình thấy hầu hết nó cũng thấy nó xấu xấu thế nào ấy, ngoại trừ những ảnh chỉ toàn màu hoặc nó đều nhau. Dưới đây là các khắc phục của mình, mình sẽ sử dụng thêm một vài dòng CSS3 giúp cho ảnh tự động tràn toàn màn hình, đặc biệt nó sẽ do dãn theo đúng tỉ lệ của màn hình không làm xấu trang web.

Thay vì sử dụng đoạn mã trên thì bạn hãy sử dụng đoạn mã sau đây

body {
  background: url(địa
Xem tiếp nội dung