Responsive hình ảnh toàn màn hình và tập trung - duy trì tỷ lệ khía cạnh, không quá sổ

Question

Vì vậy, tôi muốn có một img sẽ được hiển thị

• lớn càng tốt (điền chiều rộng khi nó là phong cảnh/chiều cao khi nó là chân dung)
• không trồng
• không nghiêng hoặc căng (gốc aspect ratio)
• trung cả chiều dọc và chiều ngang

Ngoài ra, kích thước ban đầu của hình ảnh không được biết.

Tôi đã thử một vài tùy chọn khác nhau cho điều này, bao gồm cả một flexbox một (để có được trung tâm dọc), nhưng không có gì dường như đánh dấu vào tất cả các hộp.

Lý tưởng nhất tôi muốn đây là một giải pháp CSS tất nhiên, nhưng tôi cũng đang xem xét một số JS.

Cảm ơn

Answer 1

jsFiddle Demo

Để tập trung, bạn có thể sử dụng kỹ thuật đưa ra ở đây: Absolute centering.

Để làm cho ảnh lớn nhất có thể, hãy đặt nó max-width và max-height của 100%.

.className { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    max-width: 100%; 
    max-height: 100%; 
    margin: auto; 
    overflow: auto; 
} 

Answer 2

Bạn có thể sử dụng một div với một hình nền để thay thế và tài sản CSS3 này:

background-size: contain

Bạn có thể kiểm tra một ví dụ trên:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images#contain

Để trích dẫn Mozilla:

Giá trị chứa chỉ định rằng bất kể kích thước của hộp chứa, ảnh nền phải được thu nhỏ sao cho mỗi bên càng lớn càng tốt trong khi không vượt quá chiều dài của cạnh tương ứng của vùng chứa.

Tuy nhiên, hãy nhớ rằng hình ảnh của bạn sẽ được nâng cấp nếu hình ảnh gốc của bạn là div.

Answer 3

yourimg { 
position: fixed; 
left: 0; 
top: 0; 
width: 100%; 
height: 100%; 
} 

và chắc chắn rằng không có thẻ mẹ với position: relative trong đó