Tôi đã làm theo hướng dẫn và mọi thứ và hình ảnh bg vẫn không phản hồi và không bao phủ toàn bộ trang đây là html của tôi nếu có ai có ý tưởng, nó sẽ được đánh giá cao.
Columns
Help me make a survey
In this short survey you will help me to actually learn how to make a survey page.
Name:
Email:
Age:
How long until I get some keke from this:
What should I waste my time on the most:
HTML
CSS
JS
Other
What will I get out of this?
Keke
Mace
Nistaaa
Give me some tips on how to get dolla dolla bills from this
Những gì tôi đã thử
Mình đã thử xem hướng dẫn về nó làm mọi cách mà vẫn không được. Tôi nghĩ đó là do html khác của tôi và việc sử dụng bootstrap, như rows và cols
Không có lớp bg-image
hoặc img-responsive
trong nguồn Bootstrap 5. Vì bạn chưa bao gồm bất kỳ biểu định kiểu tùy chỉnh nào nên các lớp đó không liên quan. Các kiểu duy nhất áp dụng cho phần tử của bạn là các kiểu nội tuyến.
background-image: url['webd2.png']; height: 100vh;
Điều đó làm cho phần tử chiếm 100% chiều cao của khung nhìn, nhưng nó sẽ không làm thay đổi kích thước của hình nền
Cố gắng
kích thước nền - CSS. Cascading Style Sheets. MDN[^]Thêm giải pháp của bạn ở đây
B I U S small BIG code var
& link [^] encode untab case indent outdent
Xem trước 0
thành viên hiện có
hoặc tham gia với chúng tôi
Tải xuống, Bình chọn, Nhận xét, Xuất bản
Email của bạnEmail này đang được sử dụng. Bạn có cần mật khẩu của bạn?
Mật khẩu tùy chọnKhi trả lời một câu hỏi xin vui lòng
- Đọc kỹ câu hỏi
- Hiểu rằng tiếng Anh không phải là ngôn ngữ đầu tiên của mọi người, vì vậy hãy khoan dung với lỗi chính tả và ngữ pháp
- Nếu một câu hỏi được diễn đạt kém thì hãy yêu cầu làm rõ, bỏ qua nó hoặc chỉnh sửa câu hỏi và khắc phục sự cố. Xúc phạm không được chào đón
- Đừng bảo ai đó đọc hướng dẫn. Rất có thể họ có và không nhận được. Đưa ra câu trả lời hoặc chuyển sang câu hỏi tiếp theo
Nội dung này, cùng với bất kỳ tệp và mã nguồn liên quan nào, được cấp phép theo Giấy phép Mở Dự án Code [CPOL]
Nếu thuộc tính width
được đặt thành tỷ lệ 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 tỷ lệ
Lưu ý rằng trong ví dụ trên, hình ảnh có thể được phóng to hơn kích thước ban đầu của nó. Trong nhiều trường hợp, một giải pháp tốt hơn là sử dụng thuộc tính max-width
để thay thế
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ẽ thu nhỏ lại nếu cần, nhưng không bao giờ tăng tỷ lệ 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 với 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 tính background-size
được đặt thành "chứa", hình nền sẽ chia tỷ lệ và cố gắng khớp với khu vực 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
Thí dụ
div {
bề rộng. 100%;
chiều cao. 400px;
hình nền. url['img_flowers. jpg'];
Bối cảnh Lặp lại. không lặp lại;
kích thước nền. Lưu trữ;
biên giới. 1px màu đỏ đặc;
}
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
Thí dụ
div {
bề rộng. 100%;
chiều cao. 400px;
hình nền. url['img_flowers. jpg'];
kích thước nền. 100% 100%;
biên giới. 1px màu đỏ đặc;
}
3. Nếu thuộc tính background-size
đượ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ị "bìa" giữ 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 {
bề rộng. 100%;
chiều cao. 400px;
hình nền. url['img_flowers. jpg'];
kích thước nền. che phủ;
biên giới. 1px màu đỏ đặc;
}
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 tải một hình ảnh lớn khi bạn vẫn phải thu nhỏ nó lại?
Đâ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ụ
/* Đối với chiều rộng nhỏ hơn 400px. */
cơ thể người {
hình nền. url['img_smallflower. jpg'];
}
/* Đối với chiều rộng 400px và lớn hơn. */
màn hình chỉ @media và [chiều rộng tối thiểu. 400px] {
cơ thể người {
hình nền. url['img_flowers. jpg'];
}
}
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. 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ụ
/* Đối với thiết bị nhỏ hơn 400px. */
cơ thể người {
hình nền. url['img_smallflower. jpg'];
}
/* Đối với thiết bị 400px và lớn hơn. */
màn hình chỉ @media và [min-device-width. 400px] {
cơ thể người {
hình nền. url['img_flowers. jpg'];
}
}
HTML
Yếu tố
Phần tử HTML 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ổ biến nhất của phần tử sẽ dành cho hình ảnh được sử dụng trong thiết kế đáp ứng. Thay vì có một hình ảnh được phóng to hoặc thu nhỏ dựa trên chiều rộng của khung nhìn, nhiều hình ảnh có thể được thiết kế để lấp đầy khung nhìn của trình duyệt một cách độc đáo hơn
Phần tử hoạt động tương tự như phần tử
và
. Bạn thiết lập các nguồn khác nhau và nguồn đầu tiên phù hợp với sở thích là nguồn đang được sử dụng