Kích thước tối đa cho hình nền CSS

Question

Tôi có hộp 70 x 50 px và tôi có nhiều hình ảnh khác nhau, (tệp SVG, vì vậy không có kích thước) Tôi muốn giữ tỷ lệ khung hình, nhưng một số hình ảnh là chân dung và một số có kích cỡ ngang. Vì vậy, tôi có thể làm:

background-size: 70px auto; 

và điều đó sẽ hoạt động với tất cả các biểu tượng ngang. Nhưng nó sẽ kéo dài các hình ảnh chân dung và làm cho chúng cao hơn, vì vậy chúng sẽ vẫn có tỷ lệ khung hình chính xác nhưng phần trên cùng và dưới cùng sẽ bị cắt.

có loại nền tối đa nào không?

(lý do duy nhất tôi đang sử dụng hình nền là vì bạn có thể căn giữa hình ảnh, theo chiều ngang và theo chiều dọc, do đó, thay thế là tìm cách căn chỉnh chiều dọc phần tử img trong phần tử li.)

Answer 1

Đây là vấn đề mà CSS không thể tự giải quyết. Có những thư viện JavaScript sẽ thực hiện công việc này. Nếu bạn sử dụng jQuery, bạn có thể tìm thấy một plugin hoặc cuộn chức năng của riêng bạn.

Lấy width và height của hình ảnh và tính tỷ lệ (x/y). Nếu tỷ lệ lớn hơn 70/50 (1.4), hãy đặt chiều rộng là 70px và chiều cao là (70 * x/y). Nếu tỷ lệ nhỏ hơn 70/50 (1.4), hãy đặt chiều cao là 50px và chiều rộng là (50 * x/y).

Xem thêm CSS vertical-align

Nếu bạn sử dụng các trình duyệt không hỗ trợ vertical-align, bạn có thể định vị hình ảnh hoàn toàn ở mức 50%, và thiết lập các lề trên xuống (chiều rộng * -0.5) sử dụng JavaScript. Điều đó sẽ căn chỉnh giữa hình ảnh với phần giữa của phần tử gốc, giống như căn giữa theo chiều dọc.

Answer 2

Nó không phải là khó thực hiện điều đó với CSS

• 1st, xin hãy xem the Mozilla Specs cho các đơn vị hỗn hợp cho background-size.
• thứ hai, vui lòng xem xét chỉ cần đặt background-size: contain; (IE9 +, Safari 4.1+, FF 3.0+, Opera 10+) và min/max-width/height cho phần tử vùng chứa.

Answer 3

Bạn hoàn toàn có thể giải quyết vấn đề này mà không cần JavaScript bằng cách sử dụng kết hợp CSS3 background-size và truy vấn phương tiện. ví dụ:

@media only screen and (max-width: 1000px) { 
    #element { 
     background-size: contain; 
    } 
} 

Lưu ý rằng không được hỗ trợ trong IE8 hoặc dưới đây, vì vậy bạn nên bao gồm dự phòng cho IE cũ nếu bạn vẫn hỗ trợ.

Answer 4

Câu trả lời cho câu hỏi này hơi lạc hậu. Với tư cách là stringman5 các đề cập, không phải tùy chọn CSS nào được hỗ trợ trong IE8 trở xuống. Nó cũng không phải là lựa chọn tốt nhất để jQuery xử lý hình nền của bạn nếu nó không cần thiết. Để sử dụng một tùy chọn bao gồm các fallbacks cho trình duyệt cũ, mà không sử dụng JavaScript, bạn có thể làm một cái gì đó dọc theo những dòng:

#myElement { 
    background: #FFFFFF url('mybackground.jpg') no-repeat right top; 
} 

@media only screen and (max-width: 1024px){ 
    #myElement { 
     background-size: 50%; 
    } 
} 

Chú ý rằng tôi đang sử dụng max-width trong truy vấn phương tiện truyền thông của tôi, điều này có nghĩa rằng background-size: 50%; sẽ được áp dụng UNTIL 1024px. Ngoài điểm đó, nó có kích thước mặc định.Trong các trình duyệt cũ hơn không hỗ trợ truy vấn phương tiện hoặc kích thước nền, chúng sẽ bỏ qua các tùy chọn và hiển thị kích thước tối đa của hình nền (kích thước mặc định).