Thiết kế web đáp ứng - Hình ảnh
Thay đổi kích thước cửa sổ trình duyệt để xem hình ảnh có tỷ lệ như thế nào cho vừa với trang.
Sử dụng thuộc tính chiều rộng
Nếu thuộc tính width được đặt thành 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 giảm tỷ lệ:
Lưu ý rằng trong ví dụ trên, hình ảnh có thể được phóng to lên lớn hơn kích thước ban đầu của nó. Trong nhiều trường hợp, giải pháp tốt hơn là sử dụng thuộc tính max-width .
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ẽ giảm tỷ lệ nếu cần, nhưng không bao giờ tăng tỷ lệ lên 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 việc thay đổi kích thước và chia 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 vừa với vùng 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 {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
} Hãy tự mình thử » 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 {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
} Hãy tự mình thử » 3. Nếu thuộc tính background-size được đặt thành "che", hình nền sẽ chia tỷ lệ để bao phủ toàn bộ khu vực nội dung. Lưu ý rằng giá trị "cover" giữ nguyên 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 {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
} Hãy tự mình thử »Hình ảnh khác nhau cho các thiết bị khác nhau
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 thiết bị nhỏ. Tại sao phải tải một hình ảnh lớn khi bạn vẫn phải thu nhỏ nó xuống? Để giảm tải hoặc vì bất kỳ lý do nào khác, bạn có thể sử dụng truy vấn phương tiện để hiển thị các hình ảnh khác nhau trên các thiết bị khác nhau.
Đâ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ụ
/* For width smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For width 400px and larger: */
@media only screen and (min-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
} Hãy tự mình thử » 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. Khi đó 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ụ
/* For devices smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For devices 400px and larger: */
@media only screen and (min-device-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
} Hãy tự mình thử »Phần tử <hình ảnh> HTML
Phần tử HTML <picture> 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ần tử <picture> phổ biến nhất sẽ là cho các hình ảnh được sử dụng trong các thiết kế đáp ứng. Thay vì có một hình ảnh được tăng hoặc giảm tỷ lệ dựa trên chiều rộng khung nhìn, nhiều hình ảnh có thể được thiết kế để lấp đầy khung nhìn trình duyệt đẹp hơn.
Phần tử <picture> hoạt động tương tự như phần tử <video> và <audio> . Bạn thiết lập các nguồn khác nhau và nguồn đầu tiên phù hợp với tùy chọn là nguồn đang được sử dụng:
Ví dụ
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
400px)">
<source srcset="img_flowers.jpg">
<img
src="img_flowers.jpg" alt="Flowers">
</picture> Hãy tự mình thử » Thuộc tính srcset là bắt buộc và xác định nguồn của hình ảnh.
Thuộc tính media là tùy chọn và chấp nhận các truy vấn phương tiện bạn tìm thấy trong quy tắc CSS @media .
Bạn cũng nên xác định phần tử <img> cho các trình duyệt không hỗ trợ phần tử <picture> .
