Tỷ lệ hình ảnh duy trì tỷ lệ khung hình, sau đó xoay chiều cao và chiều ngang trung tâm bên trong chiều rộng và chiều rộng của chất lỏng DIV

Question

OK, đây là một chút một chút và rất cụ thể. Tôi sẽ cố hết sức để giải thích!

Mục tiêu là duy trì tỷ lệ cỡ ảnh trong khi phóng to hình ảnh và giữ nó theo chiều dọc và chiều ngang được căn giữa bên trong một DIV chỉ được xác định theo tỷ lệ phần trăm. Hình ảnh cần phải duy trì phù hợp nhất, vì vậy nếu chiều rộng tối đa là bắt buộc thì nó được sử dụng và ngược lại.

Sử dụng Firefox phiên bản 33 (hoặc một vài phiên bản trước) để xem này js fiddle để xem nó hoạt động bình thường:

http://jsfiddle.net/3vr9v2fL/1/

HTML:

<div id="imageviewer" > 

<div class="dummy"></div> 
<div class="img-container centerer" id="imagevieweroriginal"> 
<img class="centered" src="http://chrisnuzzaco.com/couch/uploads/image/gallery/smiling_woman_wearing_drivers_cap.jpg" alt="Doctor Concentrating on Work"></img> 
</div> 

</div> 

</div> 

CSS :

#imagewrapper{ 
position:absolute; 
width:69%; 
height:100%; 
top:0px; 
bottom:0px; 
background-color:gray; 
} 


#imageviewer{ 
position:relative; 
width:100%; 
height:100%; 
} 





.responsive-container { 

position: relative; 
width: 100%; 
border: 1px solid black; 
} 


.dummy { 
padding-top: 100%; /* forces 1:1 aspect ratio */ 
} 

.img-container { 
position: absolute; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0; 
} 

.centerer { 
text-align:center; /* Align center inline elements */ 
font: 0/0 a;  /* Hide the characters like spaces */ 
} 

.centerer:before { 
content: ' '; 
display: inline-block; 
vertical-align: middle; 
height: 100%; 
} 

.centered { 

vertical-align: middle; 
display: inline-block; 
max-height: 100%; 
max-width: 100%; 
} 

Vấn đề:

tôi ban đầu được tìm thấy mã của tôi ở đây trên stackoverflow và thực hiện một đơn giản mod thêm max-height/chiều rộng đến lớp .centered. Vào thời điểm đó, tính năng này hoạt động trên tất cả các trình duyệt chính. Ngoại lệ duy nhất là Opera.

Vertically align an image inside a div with responsive height

Có một vấn đề lớn tuy nhiên: phiên bản mới nhất của Chrome (Version 38.0.2125.111) không còn làm việc với mã này và người dùng của tôi thích chrome để các trình duyệt khác bằng lãi lớn.

Bất kỳ ý tưởng nào về cách giải quyết vấn đề này? Đây có phải là lỗi với Chrome không? Tôi đang mở để đề xuất javascript để làm cho công việc này một lần nữa.

Answer 1

Hãy xem CSS object-fit tài sản:

Bạn có thể cần một polyfill cho các trình duyệt cũ, mặc dù.

View browser support để phù hợp với đối tượng.

Answer 2

tôi đến với điều này: JSFiddle - centered image keeps aspect ratio in resizable fluid container

.container { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.image { 
 
    position: absolute; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    margin: 0; 
 
}

<div class='container'> 
 
    <img class='image' src='http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg'> 
 
</div>

Các hình ảnh vẫn trung cả chiều ngang và chiều dọc. Nếu cửa sổ được thu nhỏ, hình ảnh co lại theo tỷ lệ khung hình gốc.

Tôi chưa thử nghiệm trên tất cả các trình duyệt.