सीएसएस: समस्याएं जब वस्तु फिट का उपयोग कर और वेबकिट

Question

मैं मेरी छवि को भरने के लिए एक img तत्व पर दोनों सीएसएस संपत्ति object-fit: cover उपयोग करने के लिए कोशिश कर रहा हूँ पर एक साथ बदलना इसकी युक्त div और transform: scale(xx) छवि हॉवर पर ज़ूम आउट करने की है।

यहां नमूने बेला है: https://jsfiddle.net/96kbuncq/
संपादित करें: वास्तविक छवियों के साथ नमूना: https://jsfiddle.net/96kbuncq/3/

HTML:

<div> 
    <div class="category"> 
     <img src="http://placehold.it/1200x950&text=1200x950+-+Category+1+-" /> 
    </div> 
    <div class="category"> 
     <img src="http://placehold.it/1200x950&text=1200x950+-+Category+2+-" /> 
    </div> 
    <div class="category"> 
     <img src="http://placehold.it/1200x950&text=1200x950+-+Category+3+-" /> 
    </div> 
</div> 

सीएसएस:

..... 

div.category img { 
    display: block; 
    height: 100%; 
    width: 100%; 
    object-fit: cover; 
    object-position: center; 
} 

/* Transformations */ 

div.category img { 
    transition: transform 0.35s; 
    transform: /*translateZ(0)*/ scale(1.12); 
} 

div.category:hover img { 
    transform: /*translateZ(0)*/ scale(1); 
} 

यह फ़ायरफ़ॉक्स में ठीक काम कर रहा है, लेकिन क्रोम और ओपेरा में मुझे निम्नलिखित समस्याएं हैं:

• जब पहली div मँडरा, दो अन्य लोगों को भी प्रभावित कर रहे हैं (और जब दूसरा एक मँडरा, तीसरा भी प्रभावित होता है),
• जब एक div मँडरा, छवि के अंदर पहले पूरी तरह से प्रदर्शित किया जाता है (हम सही ढंग से ज़ूम आउट होने और div "कवर" करने से पहले div के अंदर फिट करने के लिए फैली पूरी छवि को देख सकते हैं।

मुझे नहीं पता कि उन समस्याओं को कैसे हल किया जाए।

पहली समस्या (प्रभावित भाई बहन) के बारे में, मैंने पाया अन्य उत्तर translateZ(0) उपयोग करने के लिए कह रही है लेकिन जब मैं जोड़ने के इस object-fit: cover अब और काम नहीं कर रहा (संपूर्ण चित्र div अंदर फिट करने के लिए बढ़ाया गया है)।

कोई भी विचार क्रोम में यह काम कैसे करें? परीक्षण ऐसा लगता है कि backface-visibility, translateZ, और translate3d जो झिलमिलाहट को बदलने को रोकने के लिए आवश्यक हैं, को तोड़ने object-fit और background-size के बाद (दोनों object-fit और transform जब दूसरे के बिना इस्तेमाल किया अपेक्षा के अनुरूप काम कर रहे हैं।)

Answer 1

। यदि आपका लक्ष्य छवि को केन्द्रित करना है तो आप नीचे दिए गए उदाहरण में position: absolute और translate का उपयोग कर सकते हैं।

div.category { 
 
    width: 80%; 
 
    height: 150px; 
 
    margin: 20px; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
img { 
 
    display: block; 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%) scale(1.12); /* order is important here*/ 
 
    backface-visibility: hidden; 
 
    transition: transform 0.35s; 
 
} 
 
div.category:hover img { 
 
    transform: translate(-50%, -50%) scale(1); 
 
}

<div> 
 
    <div class="category"> 
 
     <img src="http://www.4freephotos.com/images/batch/Elephant-dusting674.jpg" /> 
 
    </div> 
 
    <div class="category"> 
 
     <img src="http://www.4freephotos.com/images/batch/Bananas-and-kiwi-221.jpg" /> 
 
    </div> 
 
    <div class="category"> 
 
     <img src="http://placehold.it/1200x950&text=1200x950+-+Category+3+-" /> 
 
    </div> 
 
</div>

http://jsfiddle.net/moogs/r1s1rtLk/4/

Answer 2

आप वर्ग चादर के साथ, एक अतिरिक्त परत बना सकते हैं और इस का उपयोग ज़ूम प्रभाव

आपका शैलियों ही कर रहे हैं बनाने के लिए है, लेकिन पुन: हस्ताक्षर

html, body { 
 
    width: 100%; 
 
    height: 100% 
 
} 
 

 
div.category { 
 
    width: 80%; 
 
    height: 150px; 
 
    background-color: yellow; 
 
    margin: 20px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.wrap { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
div.category .wrap img { 
 
    display: block; 
 
    height: 100%; 
 
    width: 100%; 
 
    object-fit: cover; 
 
    object-position: center; 
 
} 
 

 
/* Transformations */ 
 

 
div.category .wrap { 
 
    transition: transform 0.35s; 
 
    transform: scale(1.12); 
 
} 
 

 
div.category:hover .wrap { 
 
    transform: scale(1); 
 
}

<div> 
 
    <div class="category"> 
 
     <div class="wrap"> 
 
     <img src="http://www.4freephotos.com/images/batch/Elephant-dusting674.jpg" /> 
 
     </div> 
 
    </div> 
 
    <div class="category"> 
 
     <div class="wrap"> 
 
     <img src="http://www.4freephotos.com/images/batch/Bananas-and-kiwi-221.jpg" /> 
 
     </div> 
 
    </div> 
 
    <div class="category"> 
 
     <div class="wrap"> 
 
     <img src="http://placehold.it/1200x950&text=1200x950+-+Category+3+-" /> 
 
     </div> 
 
    </div> 
 
</div>

इस के साथ