thực hành - tạo hình ảnh đáp ứng

Trong bài thực hành này, chúng ta sẽ tìm hiểu cách tạo các hình ảnh đáp ứng bằng HTML và CSS.

Hình ảnh đáp ứng

Hình ảnh đáp ứng sẽ tự động điều chỉnh kích thước để phù hợp với kích thước của màn hình.

Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng responsive

Xem kết quả

Cách tạo một hình ảnh đáp ứng

Bước 1) Thêm HTML:

Ví dụ

<!-- Tạo vùng chứa hình ảnh -->
<div class="containerx">
    <img class="img" src="/images/picture_1.jpg" alt="nature" />
</div>

Bước 2) Thêm CSS:

Nếu muốn hình ảnh tăng và giảm tỷ lệ tự động theo kích thước trình duyệt, chúng ta đặt thuộc tính CSS của hình ảnh width thành 100% và height thành auto.

Ví dụ

/* Tạo kiểu vùng chứa hình ảnh */
.containerx {
    width:100%;
    height:auto;    
}
/* Đặt hình ảnh với chiều rộng 100% */
.containerx .img {
    width:100%;
    height:auto;    
}

Xem kết quả

Nếu muốn hình ảnh thu nhỏ lại nếu cần, nhưng không bao giờ tăng tỷ lệ lớn hơn kích thước ban đầu, chúng ta sử dụng thuộc tính max-width:100% của hình ảnh.

Ví dụ

/* Tạo kiểu vùng chứa hình ảnh */
.containerx {
    width:100%;
    height:auto;    
}
/* Đặt hình ảnh với chiều rộng tối đa 100% */
.containerx .img {
    max-width:100%;
    height:auto;    
}

Xem kết quả