TL; DR — Hình ảnh phản hồi đề cập đến hình ảnh điều chỉnh phù hợp với các kích thước, độ phân giải, vị trí màn hình khác nhau và các yếu tố khác. Vì phần lớn các trang web đều phản hồi, bạn nên tránh thêm hình ảnh tĩnh vào các trang
Thay đổi kích thước cửa sổ trình duyệt để xem hình ảnh hoạt động như thế nào
nội dung
Thêm hình ảnh phản hồi bằng CSS
Thiết kế web đáp ứng thay đổi kích thước hoặc thay đổi hướng của cửa sổ mà không làm giảm chất lượng nội dung. Hình ảnh có tỷ lệ phản hồi sau khi bạn đặt một số thuộc tính độ rộng CSS nhất định
Có ba phương pháp chính để tạo kiểu cho ảnh nền CSS. Bạn có thể sử dụng các tệp hình ảnh khác nhau dựa trên kích thước khung nhìn của thiết bị
Chỉ định chiều rộng để chia tỷ lệ
Kích thước hình ảnh CSS thay đổi theo các kích thước khác nhau của cửa sổ trình duyệt. Bạn cần đặt thuộc tính chiều rộng hoặc thuộc tính
img {
max-width: 100%;
height: auto;
}
5 để CSS phản hồi những thay đổi đóBạn có thể kích hoạt giảm và tăng tỷ lệ bằng cách đặt
img {
max-width: 100%;
height: auto;
}
0 thành 100%Sao chép ví dụ
img {
width: 100%;
height: auto;
}
Dùng thử trực tiếp Tìm hiểu trên Udacity
Trong ví dụ trên, hình ảnh có thể được thu nhỏ cho đến khi nó trở nên lớn hơn kích thước ban đầu. Do đó, hình ảnh có thể có chất lượng kém hơn trên màn hình lớn hơn
Để ngăn hình ảnh phản hồi trở nên lớn hơn kích thước hình ảnh CSS ban đầu của chúng, hãy sử dụng
img {
max-width: 100%;
height: auto;
}
5 và đặt thành 100%Sao chép ví dụ
img {
max-width: 100%;
height: auto;
}
Dùng thử trực tiếp Tìm hiểu trên Udacity
Đặt kích thước nền cho vừa với màn hình
Sử dụng CSS, bạn có thể đặt thuộc tính
img {
max-width: 100%;
height: auto;
}
2 cho hình ảnh vừa với màn hình [khung nhìn]Tài sản
img {
max-width: 100%;
height: auto;
}
2 có giá trị là img {
max-width: 100%;
height: auto;
}
4. Nó hướng dẫn các trình duyệt tự động chia tỷ lệ img {
max-width: 100%;
height: auto;
}
0 và img {
max-width: 100%;
height: auto;
}
6 của hình nền đáp ứng bằng hoặc lớn hơn chế độ xemTrong ví dụ mã này, chúng tôi làm cho kích thước hình nền CSS vừa với màn hình
Sao chép ví dụ
________số 8
Dùng thử trực tiếp Tìm hiểu trên Udacity
- Hình nền phản hồi lấp đầy toàn bộ trang mà không để lại khoảng trắng
- Hình ảnh nằm ở giữa, chia tỷ lệ nếu cần và không yêu cầu thanh cuộn
Thêm về hình nền
Giữ tỷ lệ khung hình
Chọn phương pháp này nếu bạn có một hình ảnh nhỏ và muốn giữ chất lượng của nó
Đặt thuộc tính
img {
max-width: 100%;
height: auto;
}
2 để chứa. Nó cho trình duyệt biết rằng hình nền có tỷ lệ cố gắng vừa với vùng nội dung, nhưng không làm mất tỷ lệ khung hình hoặc bị mờ
Sao chép ví dụ
img {
width: 100%;
height: auto;
}
0Dùng thử trực tiếp Tìm hiểu trên Udacity
ưu
- Thiết kế đơn giản [không có thông tin không cần thiết]
- Các khóa học chất lượng cao [ngay cả những khóa học miễn phí]
- Tính năng đa dạng
- chương trình cấp bằng nano
- Thích hợp cho doanh nghiệp
- Giấy chứng nhận hoàn thành trả tiền
LOẠI TRỪ. GIẢM GIÁ 75%
ưu
- Dễ điều hướng
- Không có vấn đề kỹ thuật
- Có vẻ quan tâm đến người dùng của nó
- Rất nhiều khóa học đa dạng
- chính sách hoàn tiền trong 30 ngày
- Giấy chứng nhận hoàn thành miễn phí
THẤP NHƯ 12. 99$
ưu
- Trải nghiệm người dùng tuyệt vời
- Cung cấp nội dung chất lượng
- Rất minh bạch với giá cả của họ
- Giấy chứng nhận hoàn thành miễn phí
- Tập trung vào các kỹ năng khoa học dữ liệu
- Lịch học linh hoạt
GIẢM GIÁ 75%
Kéo dài hình ảnh để lấp đầy khu vực
Bạn có thể đặt thuộc tính
img {
max-width: 100%;
height: auto;
}
2 thành 100% 100% để làm cho hình ảnh được kéo dài để phù hợp với một khu vực cụ thể
Sao chép ví dụ
img {
width: 100%;
height: auto;
}
2Dùng thử trực tiếp Tìm hiểu trên Udacity
Bao phủ khu vực, nhưng giữ tỷ lệ khung hình
Để che khu vực bằng hình nền và giữ tỷ lệ khung hình của nó, bạn có thể đặt thuộc tính
img {
max-width: 100%;
height: auto;
}
2 để che. Nó có thể cắt bỏ một phần của hình ảnh để giữ cho nó cân đối
Sao chép ví dụ
img {
width: 100%;
height: auto;
}
4Dùng thử trực tiếp Tìm hiểu trên Udacity
Hình ảnh đáp ứng và truy vấn phương tiện
Hình ảnh lớn trên màn hình nhỏ có thể khiến trải nghiệm người dùng trở nên tồi tệ hơn do tải trang lâu hơn
Vì lý do này, chúng tôi sử dụng truy vấn phương tiện để hiển thị hình ảnh khác nhau trên các kích cỡ màn hình khác nhau
Có hai hình ảnh [một lớn hơn và một nhỏ hơn] trong ví dụ sau. CSS chọn hiển thị một cái phù hợp với kích thước màn hình
Sao chép ví dụ
img {
width: 100%;
height: auto;
}
5Dùng thử trực tiếp Tìm hiểu trên Udacity
Thay vì
html {
background: url['image.png'] no-repeat center fixed;
background-size: cover;
}
0, bạn có thể sử dụng truy vấn phương tiện có tên là html {
background: url['image.png'] no-repeat center fixed;
background-size: cover;
}
1. Nó hoạt động nhạy bén với chiều rộng khung nhìn của thiết bịDo đó, nó đảm bảo rằng hình ảnh không thay đổi khi bạn thay đổi kích thước cửa sổ trình duyệt
Sao chép ví dụ
img {
width: 100%;
height: auto;
}
8Dùng thử trực tiếp Tìm hiểu trên Udacity
HTML5 element
Phần tử
html {
background: url['image.png'] no-repeat center fixed;
background-size: cover;
}
2 đã được giới thiệu trong HTML5. Nó là để xác định hai hoặc nhiều hình ảnhRemember: the provides options for showing different images when one image cannot load or when image size depends on the screen size.
Sao chép ví dụ
img {
max-width: 100%;
height: auto;
}
0Dùng thử trực tiếp Tìm hiểu trên Udacity
Bạn phải đặt thuộc tính
html {
background: url['image.png'] no-repeat center fixed;
background-size: cover;
}
3 để chỉ định nguồn hình ảnh. Bạn có thể đặt bao nhiêu nguồn tùy thích, nhưng hãy nhớ rằng thứ tự bạn chỉ định chúng mới quan trọng. Nguồn đầu tiên phù hợp với tùy chọn mã của bạn được sử dụngThuộc tính
html {
background: url['image.png'] no-repeat center fixed;
background-size: cover;
}
4 không bắt buộc, nhưng bạn nên đặt thuộc tính này để chấp nhận truy vấn phương tiện. Bạn cũng nên xác định phần tử html {
background: url['image.png'] no-repeat center fixed;
background-size: cover;
}
5 cho các trình duyệt cũ không hỗ trợ HTML5 và phần tử html {
background: url['image.png'] no-repeat center fixed;
background-size: cover;
}
2