सीएसएस-रूपांतरित छवि के पैरेंट तत्व को फिट करने के लिए समायोजित करना। (ट्विटर बूटस्ट्रैप)

Question

मैं वर्तमान में एक नई परियोजना पर ट्विटर बूटस्ट्रैप का उपयोग कर रहा हूं। प्रोजेक्ट का मुख्य भाग थंबनेल गैलरी है, बिल्कुल उनके उदाहरणों में उनके जैसा है (यहां: http://twitter.github.com/bootstrap/components.html#thumbnails)।

समस्या यह है कि मैं वर्तमान में सीएसएस-ट्रांसफॉर्मिंग (घूर्णन, मूल रूप से) छवियों को अपने EXIF ​​अभिविन्यास डेटा के अनुसार आवश्यकतानुसार बदल रहा हूं। जब मैं img पर एक ट्रांसफॉर्म लागू करता हूं (अब -webkit-transform के रूप में, क्योंकि मैं क्रोम पर परीक्षण कर रहा हूं), इसका मूल तत्व वही रहता है, और छवि इसके कंटेनर को "ओवरफ़्लो" करती है।

क्रोम का उपयोग करना, एक इस व्यवहार उदाहरण थंबनेल गैलरी मैं होने से पहले लिंक, प्लेसहोल्डर छवियों में से एक का निरीक्षण और img टैग के लिए एक style="-webkit-transform: rotate(90deg) संपत्ति जोड़ने के लिए जा रहा परीक्षण कर सकते हैं। छवि li कंटेनर तत्व बहती है और लेआउट तोड़ती है।

क्या इसे हल करने का कोई तरीका है और बूटस्ट्रैप एक सीएसएस-घुमावदार छवि का इलाज करता है जैसे कि यह मूल रूप से था? मैंने img टैग की ऊंचाई और चौड़ाई को मैन्युअल रूप से सेट करने के बारे में सोचा था, और उनके माता-पिता समायोजित करेंगे, लेकिन मुझे नहीं पता कि सर्वर पक्ष पर छवि का आकार कितना आकार दिया जाएगा, इससे पहले कि वे वास्तव में प्रस्तुत किए जाएं, ऐसा लगता है कि ऐसा लगता है यह दृष्टिकोण।

ओह, और वैसे,  मुझे पता है कि मैं सर्वर-साइड पर घूमने का सहारा ले सकता हूं, मुझे पता है कि यह मुश्किल नहीं है, यदि संभव हो तो मैं ब्राउज़र में ऐसा करना पसंद करूंगा।

कोई विचार?

धन्यवाद!

संपादित करें: जाप सुझाव दिया मैं पूरे कंटेनर, जो पूरी तरह से काम होता अगर यह इस तथ्य मैं थंबनेल li रों के अंदर का पाठ नोड्स है कि के लिए नहीं था बारी बारी से। कंटेनर घूर्णन करने से टेक्स्ट शो भी घुमाएगा।

Answer 1

ठीक है, उस मामले में आप इस तरह उसे लागू होना चाहिए:

<ul> 
<li class="span3 cw rotated"> 
    <div class="thumbnail"> 
     <img src="http://placehold.it/200x180" alt=""> 
     <div class="caption"> 
      <h5>Thumbnail label</h5> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
      <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p> 
     </div> 
    </div> 
</li> 

.cw img{ 
    -webkit-transform: rotate(90deg); 
    height: 210px; /* Width of container - padding (Height is now width since the image is rotated.) */ 
} 
.ccw img{ 
    -webkit-transform: rotate(-90deg); 
    height: 210px; /* Width of container - padding (Height is now width since the image is rotated.) */ 
} 

बेला चेक आउट: http://jsfiddle.net/dGgrG/4/

केवल कष्टप्रद बिट कि है max- बूटस्ट्रैप में चौड़ाई वाली सामग्री आपके पहलू अनुपात को गड़बड़ कर देती है। यह तब होगा जब आप बूटस्ट्रैप ग्रिड का उपयोग करेंगे। आप इसे पूरे सीएसएस में ओवरराल कर सकते हैं, या जावास्क्रिप्ट आपकी मदद कर सकता है।

जे एस के साथ इसे ठीक करने के लिए आप इन 2 पदों पर एक नजर है चाहिए:

Get the real width and height of an image with JavaScript? (in Safari/Chrome)

jQuery resize to aspect ratio

Answer 2

आपको कंटेनर पर रोटेशन लागू करना चाहिए, आईएमजी नहीं।

http://jsfiddle.net/jaap/dGgrG/1/

अगले समस्या आप फिर भी सामना करना पड़ रहा हो जाएगा कि रोटेशन मूल स्थिति से लागू किया जाता है।

Answer 3

संदर्भ के लिए, EXIF ​​डेटा के आधार पर छवि रोटेशन के हल के लिए (नया) सीएसएस रास्ता image-orientation: from-image संपत्ति है।

http://sethfowler.org/blog/2013/09/13/new-in-firefox-26-css-image-orientation/

से इन समस्याओं के सभी नए सीएसएस छवि उन्मुखीकरण संपत्ति है, जो अब फ़ायरफ़ॉक्स 26. द्वारा समर्थित है शैली छवि उन्मुखीकरण जब द्वारा हल कर रहे हैं: से छवि एक करने के लिए लागू किया जाता है जेपीईजी छवि, ब्राउजर लेआउट और प्रतिपादन करते समय अपने EXIF ​​ओरिएंटेशन टैग को ध्यान में रखेगा। इसका मतलब है कि स्मार्टफोन और डिजिटल कैमरा छवियां अब ब्राउज़र द्वारा मूल रूप से उनके उचित अभिविन्यास में प्रदर्शित की जा सकती हैं, केवल एक ही सीएसएस संपत्ति जोड़कर !

यहां इस आलेख में पहली छवि है, लेकिन इस बार छवि-अभिविन्यास लागू है। यदि आप फ़ायरफ़ॉक्स 26 का उपयोग कर रहे हैं, तो आपको यह छवि दिखाई देगी, जैसा कि इसका उद्देश्य था, ऊपर आकाश और जमीन नीचे।