Nếu thuộc tính width được đặt thành tỷ lệ phần trăm và thuộc tính height được đặt thành "tự động", hình ảnh sẽ phản hồi và tăng tỷ lệ
Lưu ý rằng trong ví dụ trên, hình ảnh có thể được phóng to hơn kích thước ban đầu của nó. Trong nhiều trường hợp, một giải pháp tốt hơn là sử dụng thuộc tính max-width để thay thế
Sử dụng Thuộc tính chiều rộng tối đa
Nếu thuộc tính max-width được đặt thành 100%, hình ảnh sẽ 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 của nó
Thêm hình ảnh vào trang web mẫu
Hinh nên
Hình nền cũng có thể đáp ứng với thay đổi kích thước và tỷ lệ
Ở đây chúng tôi sẽ chỉ ra ba phương pháp khác nhau
1. Nếu thuộc tính background-size được đặt thành "chứa", hình nền sẽ chia tỷ lệ và cố gắng khớp với khu vực nội dung. Tuy nhiên, hình ảnh sẽ giữ nguyên tỷ lệ khung hình [mối quan hệ tỷ lệ giữa chiều rộng và chiều cao của hình ảnh]
Đây là mã CSS
Ví dụ
div {
chiều rộng. 100%;
chiều cao. 400px;
hình nền. url['img_flowers. jpg'];
lặp lại nền. không lặp lại;
kích thước nền. chứa;
đường viền. 1px màu đỏ đặc;
}
2. Nếu thuộc tính background-size được đặt thành "100% 100%", hình nền sẽ kéo dài để bao phủ toàn bộ khu vực nội dung
Đây là mã CSS
Ví dụ
div {
chiều rộng. 100%;
chiều cao. 400px;
hình nền. url['img_flowers. jpg'];
kích thước nền. 100% 100%;
đường viền. 1px màu đỏ đặc;
}
3. Nếu thuộc tính background-size được đặt thành "cover", hình nền sẽ mở rộng để bao phủ toàn bộ khu vực nội dung. Lưu ý rằng giá trị "bìa" giữ tỷ lệ khung hình và một số phần của hình nền có thể bị cắt bớt
Đây là mã CSS
Ví dụ
div {
chiều rộng. 100%;
chiều cao. 400px;
hình nền. url['img_flowers. jpg'];
kích thước nền. bìa;
đường viền. 1px màu đỏ đặc;
}
Hình ảnh khác nhau cho các thiết bị khác nhau
Một hình ảnh lớn có thể hoàn hảo trên màn hình máy tính lớn, nhưng vô dụng trên một thiết bị nhỏ. Tại sao tải một hình ảnh lớn khi bạn vẫn phải thu nhỏ nó lại?
Đây là một hình ảnh lớn và một hình ảnh nhỏ hơn sẽ được hiển thị trên các thiết bị khác nhau
Ví dụ
/* Đối với chiều rộng nhỏ hơn 400px. */
body {
hình nền. url['img_smallflower. jpg'];
}
/* Đối với chiều rộng 400px và lớn hơn. */
@màn hình chỉ phương tiện và [chiều rộng tối thiểu. 400px] {
body {
background-image. url['img_flowers. jpg'];
}
}
Bạn có thể sử dụng truy vấn phương tiện min-device-width, thay vì min-width, để kiểm tra chiều rộng của thiết bị, thay vì chiều rộng của trình duyệt. Sau đó, hình ảnh sẽ không thay đổi khi bạn thay đổi kích thước cửa sổ trình duyệt
Ví dụ
/* Đối với thiết bị nhỏ hơn 400px. */
body {
hình nền. url['img_smallflower. jpg'];
}
/* Đối với thiết bị 400px và lớn hơn. */
@màn hình chỉ phương tiện và [độ rộng tối thiểu của thiết bị. 400px] {
body {
background-image. url['img_flowers. jpg'];
}
}
HTML
Thành phần
Phần tử HTML giúp các nhà phát triển web linh hoạt hơn trong việc chỉ định tài nguyên hình ảnh
Việc sử dụng phổ biến nhất của phần tử sẽ dành cho hình ảnh được sử dụng trong thiết kế đáp ứng. Thay vì có một hình ảnh được phóng to hoặc thu nhỏ dựa trên chiều rộng của khung nhìn, nhiều hình ảnh có thể được thiết kế để lấp đầy khung nhìn của trình duyệt một cách độc đáo hơn
Phần tử hoạt động tương tự như phần tử và . Bạn thiết lập các nguồn khác nhau và nguồn đầu tiên phù hợp với sở thích là nguồn đang được sử dụng
Mẹo. Luôn chỉ định cả hai thuộc tính height4 và width cho hình ảnh. Nếu chiều cao và chiều rộng được đặt, không gian cần thiết cho hình ảnh sẽ được dành riêng khi tải trang. Tuy nhiên, không có các thuộc tính này, trình duyệt không biết kích thước của hình ảnh và không thể dành không gian thích hợp cho nó. Hiệu ứng sẽ là bố cục trang sẽ thay đổi trong khi tải [trong khi tải hình ảnh]
Mẹo. Thu nhỏ hình ảnh lớn với các thuộc tính height và width buộc người dùng phải tải xuống hình ảnh lớn [ngay cả khi hình ảnh đó trông nhỏ trên trang]. Để tránh điều này, hãy thay đổi tỷ lệ hình ảnh bằng một chương trình trước khi sử dụng nó trên một trang