Căn Lề Bản Đồ

Ở bài học này chúng ta sẽ căn lề nhanh cho bản đồ để nó hiển thị lấp đầy 100% độ rộng của phần tử container chứa nó.

Có hai cách khác nhau để thực hiện công việc này đó là sử dụng luật CSS hoặc sử dụng chính HTML.

Sử Dụng HTML

Thuộc tính width của <iframe> cho phép chúng ta thiết lập độ rộng của phần tử này. Với cách làm này bạn chỉ cần thiết lập giá trị cho thuộc tính này là 100%:

<div>
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3919.4961465198016!2d106.69845251488363!3d10.7732607121978!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31752f4743648f3d%3A0x16ce95918cb14834!2sSaigon+Centre+Shopping+Mall!5e0!3m2!1sen!2s!4v1517406862987" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Tải lại trang trên trình duyệt để kiểm tra lại bạn sẽ thấy bản đồ lúc này được hiển thị với độ rộng bằng 100% độ rộng của container chứa nó:

Sử Dụng CSS

Với cách làm này bạn thêm vào đoạn luật CSS điều chỉnh độ rộng của iframe như sau:

iframe {
    width: 100%;
}

Đồng thời xoá bỏ thuộc tính width ra khỏi thẻ mở <iframe> được thêm vào trước đó:

<div>
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3919.4961465198016!2d106.69845251488363!3d10.7732607121978!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31752f4743648f3d%3A0x16ce95918cb14834!2sSaigon+Centre+Shopping+Mall!5e0!3m2!1sen!2s!4v1517406862987" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Tải lại trang trên trình duyệt bạn sẽ thấy kết quả hiển thị giống như cách làm sử dụng HTML trước đó.

So Sánh Hai Cách Làm

Xét về mặt hiển thị thì cả hai cách làm không có gì khác biệt tuy nhiên nếu xét về tối ưu trong thiết kế thì cách làm sử dụng HTML có nhiều ưu điểm hơn như sau:

Trình duyệt có thể hiển thị bản đồ mà không cần tới phải phân tích luật CSS và áp dụng cho phần tử iframe mà chỉ cần phân tích mã HTML
Giảm dung lượng cho tập tin main.css, tuy sự tối giản này không đáng kể với trường hợp đơn giản này nhưng bạn vẫn nên làm vì sẽ hình thành thói quen tốt khi viết code.