सीएसएस

Question

के साथ छवि घुमाएं मैं केवल 9 0 डिग्री से सीएसएस के साथ छवि को घूर्णन करना चाहता हूं। मैं रोटेशन कर सकता हूं, लेकिन फिर छवि की स्थिति यह नहीं है कि यह क्या होना चाहिए। सबसे पहले, यह एक ही div में कुछ अन्य तत्वों को ओवरले करेगा, और दूसरा, इसके लंबवत आयाम युक्त div से बड़ा हो जाएगा। यहाँ मेरी कोड

<article> 
<section class="photo"> 
<div>Title</div> 
<div class="imagetest"> 
<img src="DSC01688.JPG" width=100%/> 
</div> 
</section> 
</article> 

जहां दो वर्गों के रूप में

.imagetest img { 
transform:   rotate(270deg); 
-ms-transform:  rotate(270deg); 
-moz-transform:  rotate(270deg); 
-webkit-transform: rotate(270deg); 
-o-transform:  rotate(270deg); 
} 
.photo { 
width: 95%; 
padding: 0 15px; 
margin: 0 0 10px 0; 
float: left; 
background: #828DAD; 
} 

परिभाषित कर रहे हैं अनुभाग के भीतर छवि रखने का एक तरीका नहीं है है? मैं छवि का अनुवाद और स्केल कर सकता हूं ताकि यह अनुभाग के भीतर हो, लेकिन यह केवल तभी काम करता है, अगर मैं पहले से छवि आकार को जानता हूं। मैं एक विश्वसनीय तरीका चाहता हूं जो आकार पर निर्भर न हो।

Answer 1

माता-पिता को overflow: hidden की शैली दें। यदि यह भाई तत्वों को ओवरलैप कर रहा है, तो आपको इसे एक निश्चित ऊंचाई/चौड़ाई वाले कंटेनर के अंदर रखना होगा और उसे overflow: hidden की शैली दें।

Answer 2

समस्या जैसी छवि दिखती है स्क्वायर नहीं है और ब्राउजर इस तरह समायोजित करता है। घूर्णन के बाद सुनिश्चित करें कि छवि मार्जिन को बदलकर आयाम बनाए रखा जाता है।

.imagetest img { 
    transform: rotate(270deg); 
    ... 
    margin: 10px 0px; 
} 

राशि छवि की ऊंचाई x चौड़ाई में अंतर पर निर्भर करेगी। मार्जिन पैरामीटर को पहचानने के लिए आपको display:inline-block; या display:block जोड़ने की आवश्यकता हो सकती है।