[RWD Bài 4] Responsive hình ảnh (image) với HTML CSS

Responsive hình ảnh (image) với HTML CSS

Trong bài này chúng ta đi tìm hiểu về responsive hình ảnh (image) với HTML CSS trong Responsive Web Design. Một vấn đề rất quan trọng không thể bỏ qua.

Cách Responsive hình ảnh (image) với HTML CSS

Một tấm hình (image) thường có kích thước cố định, nếu ta không điều chỉnh để nó responsive thì chắc chắn sẽ không hiển thị cân xứng trên tất cả thiết bị được. Nếu màn hình to với độ phân giải cao (màn hình PC 4k chẳng hạn) thì nó như “teo lại” còn màn hình nhỏ thì nó lại tràn ra ngoài rất khó chịu.

Để thực hiện responsive image, ta sử dụng width và max-width kết hợp theo cấu trúc như bên dưới:

img {
width: 100%;
max-with: pixcel;
height:auto;
}

Trong đó:

• width: 100%: chiều rộng  hình ảnh co giản tỷ lệ theo chiều rộng của màn hình thiết bị,
• max-width: pixcel: chiều rộng lớn nhất cho phép đối với hình, thuộc tính này giúp hình ảnh không bị giãn ra quá mức >> không đẹp.
• height:auto; chiều cao tự động, giá trị auto để hình ảnh tự cân đối chiều cao tương ứng với sự thay đổi của chiều rộng.

Ví dụ responsive image

Ví dụ bên dưới mình dùng CodePen, bạn tham khảo, sửa giá trị lại để xem kết quả nhé !

See the Pen
Responsive image với HTML CSS by Hocban.vn (@hocbanvn)
on CodePen.

Như vậy là qua bài này mình đã chia sẻ xong cho bạn cách để responsive hình ảnh (image) với HTML CSS rồi đấy, nếu có gì thắc mắc hoặc góp ý, bạn để lại bình luận bên dưới nhé !

Bài trước đó và tiếp theo

• [RWD Bài 3] Media Queries là gì ? Và cách sử dụng
• [RWD Bài 5] Responsive video với HTML CSS