पहलू अनुपात बनाए रखने वाली स्केल छवि, फिर तरल ऊंचाई और चौड़ाई के अंदर लंबवत और क्षैतिज केंद्र DIV

Question

ठीक है, यह एक मुट्ठी भर और बहुत ही विशिष्ट विशिष्ट है। मैं समझाने के लिए अपनी पूरी कोशिश करूंगा!

लक्ष्य छवि को स्केल करते समय पक्ष अनुपात को बनाए रखना और इसे लंबवत और क्षैतिज रूप से एक डीआईवी के अंदर केंद्रित करना है जिसे केवल प्रतिशत द्वारा परिभाषित किया गया है। छवि को सर्वोत्तम फिट बनाए रखने की आवश्यकता है, इसलिए यदि अधिकतम चौड़ाई की आवश्यकता है तो इसका उपयोग किया जाता है और इसके विपरीत।

उपयोग Firefox संस्करण 33 (या कुछ पहले के संस्करणों) देखने पर इस बेला जे एस ठीक से काम कर यह देखने के लिए:

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> 

सीएसएस :

#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%; 
} 

समस्या:

मैं मूल रूप से stackoverflow पर यहाँ मेरी कोड मिल गया और .centered वर्ग के लिए एक सरल आधुनिक जोड़ने अधिकतम ऊँचाई/चौड़ाई बना दिया। उस समय, यह सभी प्रमुख ब्राउज़रों में काम किया। ओपेरा का एकमात्र अपवाद है।

Vertically align an image inside a div with responsive height

एक बड़ी समस्या है लेकिन नहीं है: क्रोम (संस्करण 38.0.2125.111) के नवीनतम संस्करण को अब इस कोड के साथ काम करता है और मेरी उन एक बड़े अंतर से अन्य ब्राउजर के लिए क्रोम पसंद करते हैं।

इसे हल करने के तरीके पर कोई विचार? क्या यह क्रोम के साथ एक बग है? मैं इस काम को फिर से बनाने के लिए जावास्क्रिप्ट सुझावों के लिए खुला हूं।

Answer 1

CSS object-fit संपत्ति पर एक नज़र डालें:

आप पुराने ब्राउज़र के लिए एक polyfill, हालांकि पड़ सकता है।

View browser support ऑब्जेक्ट-फिट के लिए।

Answer 2

मैं इस के साथ आया था: 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>

छवि दोनों क्षैतिज और ऊर्ध्व रूप से केंद्रित रहता है। यदि खिड़की को स्केल कर दिया गया है तो मूल पहलू अनुपात का सम्मान करने से छवि घट जाती है।

मैंने हालांकि सभी ब्राउज़रों पर इसका परीक्षण नहीं किया।