Thiết kế trang web响应 - Ảnh

Sử dụng thuộc tính width

Nếu width Thuộc tính đặt thành phần trăm và chiều cao đặt thành "auto", thì hình ảnh sẽ phóng to hoặc thu nhỏ theo phản hồi:

Mô hình

img {
  width: 100%;
  height: auto;
}

Thử ngay

Lưu ý rằng trong ví dụ trên, hình ảnh có thể phóng to 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à thay đổi bằng cách sử dụng max-width Thuộc tính.

Sử dụng thuộc tính max-width

Nếu đặt thuộc tính max-width thành 100%, thì hình ảnh sẽ thu nhỏ theo nhu cầu nhưng sẽ không phóng to lớn hơn kích thước ban đầu của nó:

Mô hình

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

Thử ngay

Thêm hình ảnh vào trang web mẫu

Mô hình

img {
  width: 100%;
  height: auto;
}

Thử ngay

Ảnh nền

Ảnh nền cũng có thể phản hồi khi điều chỉnh kích thước và tỷ lệ thu phóng.

Đây là ba phương pháp khác nhau mà chúng tôi trình bày:

1. Nếu đặt background-size Đặt thuộc tính thành "contain", thì ảnh nền sẽ thu nhỏ và cố gắng phù hợp với khu vực nội dung. Tuy nhiên, hình ảnh sẽ giữ nguyên tỷ lệ dài rộng (tỷ lệ giữa chiều rộng và chiều cao của hình ảnh):

Đây là đoạn mã CSS:

Mô hình

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid red;
}

Thử ngay

2. Nếu background-size thuộc tính được thiết lập là "100% 100%", hình ảnh nền sẽ được kéo dãn để bao phủ toàn bộ khu vực nội dung:

Đây là đoạn mã CSS:

Mô hình

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: 100% 100%;
  border: 1px solid red;
}

Thử ngay

3. Nếu background-size Nếu thuộc tính được thiết lập là "cover", hình ảnh nền sẽ được thu nhỏ để bao phủ toàn bộ khu vực nội dung. Lưu ý rằng giá trị "cover" giữ nguyên tỷ lệ hình ảnh và có thể cắt bỏ một phần hình ảnh nền:

Đây là đoạn mã CSS:

Mô hình

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: cover;
  border: 1px solid red;
}

Thử ngay

Chuẩn bị hình ảnh khác nhau cho các thiết bị khác nhau

Hình ảnh lớn có thể hiển thị hoàn hảo trên màn hình máy tính lớn, nhưng không có ích trên các thiết bị nhỏ. Tại sao lại tải hình ảnh lớn khi phải thu nhỏ hình ảnh? Để giảm tải hoặc vì bất kỳ lý do nào khác, bạn có thể sử dụng điều kiện truyền thông để hiển thị 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ỏ, sẽ hiển thị trên các thiết bị khác nhau:

Mô hình

/* Đối với độ rộng nhỏ hơn 400 pixel: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* Đối với độ rộng từ 400 pixel trở lên: */
@media only screen and (min-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

Thử ngay

Bạn có thể sử dụng điều kiện truyền thông min-device-width thay vì min-width để kiểm tra độ rộng thiết bị, thay vì độ rộng trình duyệt. Sau đó, khi bạn điều chỉnh kích thước cửa sổ trình duyệt, hình ảnh sẽ không thay đổi:

Mô hình

/* Đối với các thiết bị có độ rộng màn hình nhỏ hơn 400 pixel: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* Đối với các thiết bị có độ rộng màn hình từ 400 pixel trở lên: */
@media only screen and (min-device-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

Thử ngay

phần tử <picture> của HTML5

HTML5 đã giới thiệu <picture> phần tử cho phép bạn định nghĩa nhiều hình ảnh.

hỗ trợ trình duyệt

38.0 13 38.0 9.1 25.0

<picture> của phần tử có tác dụng tương tự như <video> và <audio> 元素。Chúng ta đã thiết lập các nguồn khác nhau, và nguồn ưu tiên đầu tiên là nguồn đang được sử dụng:

Mô hình

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>

Thử ngay

srcset Thuộc tính là bắt buộc, nó định nghĩa nguồn ảnh.

media Thuộc tính là tùy chọn, nó chấp nhận Quy tắc CSS @media tìm thấy trong truy vấn truyền thông.

Hướng dẫn:Bạn cũng nên thêm <picture> Định nghĩa trình duyệt của đối tượng <img> Đối tượng.