Responsive image

Một tấm hình (image) thường có kích thước cố định, nếu ta không xử lý thì image này sẽ không chạy tốt trên các chiều rộng màn hình khác nhau, ví dụ trong trường hợp màn hình nhỏ hơn chiều rộng tấm hình, thì sẽ có thanh cuộn (scroll bar) ngang.

Để image có thể chạy tốt trên các màn hinh khác nhau, chúng ta sử dụng width và max-width kết hợp.

Cách viết một responsive image

img {
    width: percent;
    max-with: pixcel;
}

• width: percent: cho chiều rộng image co giản tỷ lệ theo chiều rộng của màn hình thiết bị, VD: width: 100% thì image lúc nào cũng sẽ có chiều rộng bằng với chiều rộng màn hình thiết bị, cho dù màn hinh thiết bị co giản rộng lớn ra sao thì image luôn là 100% (chiều cao mặc định auto - tự động tỷ lệ theo chiều rộng).
• max-width: pixcel: chiều rộng lớn nhất thường sẽ cho bằng với chiều rộng thực tế của image, mục đích là khi màn hình thiết bị lớn hơn image, thì chiều rộng của image sẽ trả về ban đầu, mục đích không phóng to image, tránh làm giảm chất lượng hình ảnh.

Ví dụ

Chúng ta sẽ thử dùng width và max-width để tạo image hiển thị linh hoạt cho tất cả các dạng màn hình của từng thiết bị, ta làm như sau:

HTML viết:

<img src="img_responsive.jpg" alt="">

CSS viết:

img {
    width: 100%;
    max-width: 960px;/* chiều rộng của image */
}

Hiển thị trình duyệt:

Do chiều rộng màn hình hiển thị nhỏ hơn chiều rộng image, nên chiều rộng image hiện tại sẽ là 100% so với chiều rộng hiển thị.

Click xem ví dụ responsive image để hiểu nhiều hơn.