Tỷ lệ hình nền CSS để phù hợp

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ế độ xem

Trong 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;
}

0

Dù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

Những đặc điểm chính

• 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ó

Những đặc điểm chính

• 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ọ

Những đặc điểm chính

• 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;
}

2

Dù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;
}

4

Dù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;
}

5

Dù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;
}

8

Dù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 ảnh

Remember: 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;
}

0

Dù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ụng

Thuộ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

Làm cách nào để thay đổi kích thước hình nền của tôi để phù hợp với bất kỳ màn hình nào?

Tôi có thể chia tỷ lệ trên hình nền không?