Bạn có thể thay đổi kích thước hình nền trong css không?

Is there a way to make a background image resizeable? As in, fill the background of a web page edge-to-edge with an image, no matter the size of the browser window. Also, have it resize larger or smaller as the browser window changes. Also, make sure it retains its ratio (doesn’t stretch weird). Also, doesn’t cause scrollbars, just cuts off vertically if it needs to. Also, comes in on the page as an inline

Tiếp tục và thay đổi kích thước cửa sổ trình duyệt của bạn xung quanh và chú ý cách hình ảnh sẽ thay đổi kích thước cho phù hợp. Nó không làm điều đó “một cách nhanh chóng”, nhưng nó hoạt động. Nó cũng đáp ứng tất cả các yêu cầu khác. không có thanh cuộn và giữ nguyên tỷ lệ pixel

Lần thử đầu tiên

Chà, suy nghĩ đầu tiên của tôi là đây thực sự cần phải là một CSS background-image. Điều này sẽ lấp đầy màn hình từ cạnh này sang cạnh khác nếu hình ảnh đủ lớn. Nó cũng có thể được căn giữa, vì vậy tôi nghĩ rằng điều này sẽ đủ tốt. Các cửa sổ trình duyệt lớn sẽ hiển thị nhiều hình ảnh hơn và các cửa sổ nhỏ hơn sẽ hiển thị ít hình ảnh hơn. Nếu được áp dụng cho thẻ body, thẻ này sẽ lấp đầy màn hình một cách độc đáo mà không có thanh cuộn. Tôi nghĩ giải pháp khá hay, ngay cả khi nó không thể thay đổi kích thước về mặt kỹ thuật, vì bạn không thể đặt kích thước của hình nền CSS. Đây là cách tôi đã thực hiện về cách tiếp cận đầu tiên này

	....
	
	


	

Bạn đoán nó, jQuery. Đoạn mã trên sẽ ẩn hình ảnh trên trang, nhưng lấy thuộc tính “src” của nó và áp dụng nó làm nền cho phần tử body (thông qua ID duy nhất của nó là “page-body”). Kiểm tra một ví dụ về điều này trong hành động

Lần thử thứ hai (tốt hơn)

While the first attempt did a decent job, it failed at the most fundamental level: it wasn’t “resizeable”. So time for another take. In order to control the size of an image displayed on the screen without literally altering the file itself is to display it inline with the

Để làm cho hình ảnh nội tuyến này hoạt động giống hình nền hơn, chúng ta có thể sử dụng lớp duy nhất mà chúng ta đã áp dụng để áp dụng một số vị trí tuyệt đối

img.source-image {
	position: absolute;
	top: 0;
	left: 0;
}

Do định vị tuyệt đối này, bất cứ thứ gì bạn muốn đặt lên trên nó cũng sẽ cần định vị và giá trị chỉ số z cao hơn. Nếu hình ảnh nguồn của bạn đặc biệt cao hoặc cửa sổ trình duyệt của bạn đặc biệt rộng, hình ảnh có thể dễ dàng cao hơn cửa sổ trình duyệt của bạn và buộc thanh cuộn dọc. Để ngăn chặn điều này, chỉ cần đặt giá trị tràn trên cơ thể của bạn thành ẩn

body {
  overflow: hidden;
}

Lần thử thứ ba (tốt nhất)

Quên công việc javascript này đi. Cảm ơn nhận xét của Anders đã chỉ ra phiên bản Stu Nicholls, đây là một cách thậm chí còn tốt hơn để xử lý việc này mà không cần bất kỳ javascript nào

Vì chúng ta đã có một lớp duy nhất trên hình ảnh, hình ảnh được định vị tuyệt đối và vấn đề về thanh cuộn đã được xử lý, chúng ta chỉ cần đặt chiều rộng bằng cách sử dụng tỷ lệ phần trăm trực tiếp trong CSS

#img.source-image {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

Xem một bản demo của điều này trong hành động. Đây là giải pháp tốt nhất cho đến nay, bởi vì việc thay đổi kích thước diễn ra nhanh chóng để mang lại cảm giác mượt mà và không phụ thuộc vào bất kỳ javascript nào

Tìm hiểu thêm về WhatsTheWeather. mạng lưới

Mình chỉ thiết kế đơn giản cho What’s The Weather (Update tháng 11/2013. hiện đang ngoại tuyến), nhưng Richard đã viết tất cả mã tuyệt vời để làm cho nó hoạt động. Theo những gì tôi hiểu, đó là một chuỗi gồm 3 API khác nhau. Đầu tiên, nó lấy địa chỉ IP của bạn và sử dụng API để biến địa chỉ đó thành thành phố và tiểu bang. Sau đó, nó sử dụng một số API thời tiết để lấy thời tiết hiện tại. Sau đó, nó sử dụng API Flickr để lấy một hình ảnh ngẫu nhiên với các thẻ phù hợp với thời tiết. Nếu không lấy được zip của bạn, nó sẽ yêu cầu bạn lấy, giống như trên iPhone (nó cũng tự động phát hiện và xử lý hơi khác một chút). Tất cả đã hoàn thành với Ruby on Rails. Điệu nhảy khá lạ mắt

Bạn có thể chia tỷ lệ hình nền bằng CSS không?

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

Làm cách nào chúng ta có thể thay đổi kích thước CSS hình ảnh?