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 để vừa với trang.
Sử dụng Thuộc tính Chiều rộng
Nếu thuộc widthtính được đặt thành phần trăm và thuộc heighttính được đặt thành "tự động", hình ảnh sẽ phản hồi và tăng giảm tỷ lệ:
Thí dụ
img {
width: 100%;
height: auto;
}
Lưu ý rằng trong ví dụ trên, hình ảnh có thể được thu nhỏ để lớn hơn kích thước ban đầu của nó. Một giải pháp tốt hơn, trong nhiều trường hợp, sẽ là sử dụng
max-widthtài sản thay thế.
Sử dụng Thuộc tính chiều rộng tối đa
Nếu thuộc max-widthtính được đặt thành 100%, hình ảnh sẽ giảm tỷ lệ nếu phải, nhưng không bao giờ tăng tỷ lệ để lớn hơn kích thước ban đầu:
Thí dụ
img {
max-width: 100%;
height: auto;
}
Thêm hình ảnh vào trang web mẫu
Thí dụ
img {
width: 100%;
height: auto;
}
Hinh nên
Hình nền cũng có thể đáp ứng với việc 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 background-sizetính đượ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ệ co (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:
Thí dụ
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
2. Nếu thuộc background-sizetính đượ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:
Thí dụ
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
3. Nếu thuộc background-sizetính được đặt thành "cover", 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:
Thí dụ
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
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 phải tải một hình ảnh lớn khi bạn vẫn phải thu nhỏ nó? Để 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:
Thí 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');
}
}
min-device-widthThay vào đó ,
bạn có thể sử dụng truy vấn phương tiện min-widthđể kiểm tra chiều rộng thiết bị, thay vì chiều rộng 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:
Thí 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');
}
}
Phần tử <picture> 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.
The most common use of the <picture>
element will be for images used in responsive designs. Instead of having one
image that is scaled up or down based on the viewport width, multiple images can
be designed to more nicely fill the browser viewport.
The <picture> element works similar to the <video> and
<audio> elements. You set up different sources, and the first source that fits the
preferences is the one being used:
Example
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
400px)">
<source srcset="img_flowers.jpg">
<img
src="img_flowers.jpg" alt="Flowers">
</picture>
The srcset attribute is required, and defines the source of the image.
The media attribute is optional, and accepts the media queries you find in
CSS @media rule.
You should also define an <img> element for browsers that do not support the
<picture> element.