Hình ảnh trong quá trình chuyển đổi không tạo kiểu cho phù hợp với đối tượng: bìa;

Question

'Ello Stackoverflow!

Tôi tự hỏi liệu có ai có thể giúp tôi tìm ra điều này không. Tôi tìm thấy this Trước/sau khi người xem hình ảnh của Jason Mayes và tôi đang làm việc để làm cho nó được tập trung một cách có trách nhiệm.

Vì vậy, tôi đã tìm thấy "đối tượng phù hợp: bìa"; và "đối tượng-vị trí: 50% 50%;" để làm việc tuyệt vời nhưng tôi sớm nhận ra rằng bản thân quá trình chuyển đổi đã không được tạo kiểu theo cách đó, bằng cách nào đó.

tôi chia hai bút Jason để cho bạn thấy rõ hơn: http://codepen.io/RogerAntonio/pen/rVXrma

Tôi nghĩ vấn đề nằm ở đâu đây thôi:

.container img { 
    object-fit: cover; 
    object-position: 50% 50%; 
    overflow: hidden; 
} 

.beforeAfter .before { 
    z-index:2; 
    opacity: 1; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -ms-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
} 

Cảm ơn bạn trước!

Answer 1

Hỗ trợ cho các thuộc tính đối tượng đó không phải là tuyệt vời. Tôi sẽ thử sử dụng hình ảnh nền nội tuyến trên nhịp hoặc div và sau đó đặt chiều cao.

<span class="image before" style="background-image:url('http://www.abc.net.au/news/linkableblob/5272894/data/view-of-independence-square-in-kiev-data.jpg')" /> 
<span class="image after" style="background-image:url('http://www.abc.net.au/news/linkableblob/5272868/data/site-of-anti-government-protest-in-kiev-data.jpg')" /> 

http://codepen.io/Hexl/pen/waVEKL

Answer 2

đối tượng phù hợp được biết đến để phá vỡ với các chuyển động. Tôi khuyên bạn nên sử dụng cách thay thế định vị lại hình ảnh của bạn - ví dụ: với thuộc tính biến đổi CSS:

.container img { 
    width: 100%; 
    height: auto; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

Bạn sẽ cần bỏ qua các kiểu của bạn để một số khai báo dự phòng khác sẽ không ghi đè vị trí. Bạn có thể cần phải thêm một số tiền tố của nhà cung cấp để thực hiện công việc này trong các trình duyệt khác nhau. Slightly modified fiddle here