CSS में घुमाए गए तत्व जो उनके माता-पिता की ऊंचाई को सही ढंग से प्रभावित करते हैं

Question

मान लें कि मेरे पास कुछ कॉलम हैं, जिनमें से कुछ मैं मानों को घुमाना चाहूंगा:

http://jsfiddle.net/MTyFP/1/

<div class="container">
    <div class="statusColumn"><span>Normal</span></div>
    <div class="statusColumn"><a>Normal</a></div>
    <div class="statusColumn"><b>Rotated</b></div>
    <div class="statusColumn"><abbr>Normal</abbr></div>
</div>

इस सीएसएस के साथ:

.statusColumn b {
  writing-mode: tb-rl;
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

यह इस तरह दिखता है:

क्या किसी भी सीएसएस को लिखना संभव है जो घुमाए गए तत्व का कारण उसके माता-पिता की ऊंचाई को प्रभावित करेगा, जैसे कि पाठ अन्य तत्वों को ओवरलैप नहीं करेगा? कुछ इस तरह:

Comments

मददगार हो सकता है stackoverflow.com/questions/7565542/…

— पीट

अधिकांश ब्राउज़र के लिए लेखन-विधा अब उपलब्ध है (मैं एक IE5 फ़ीचर होने के लिए उपयोग करता हूं) मैं आजकल jsfiddle.net/MTyFP/698 देखूंगा: developer.mozilla.org/en-US/docs/Web-CSS/writing-mode

— जी-साइरिलस

@ जी Cyr writing-modeहै उपलब्ध सबसे ब्राउज़रों के लिए है, लेकिन बुरी तरह गाड़ी। एक संबंधित प्रश्न पर, मैंने हार मानने से पहले ब्राउज़र-विशिष्ट बग के आसपास काम करने की कोशिश के कई पुनरावृत्तियों के माध्यम से जाना; आप stackoverflow.com/posts/47857248/revisions पर विफलताओं के मेरे उत्तराधिकार को देख सकते हैं , जहां मैं ऐसी चीज़ से शुरू करता हूं जो क्रोम में काम करती है, लेकिन फ़ायरफ़ॉक्स या एज से नहीं, फिर अन्य दो को ठीक करने की प्रक्रिया में क्रोम को तोड़ दें, और अंत में मेरे प्रति श्रद्धावान इसका जवाब दें और इसे केवल क्रोम के रूप में लेबल करें। अगर आप इस रास्ते से नीचे जाना चाहते हैं, तो सतर्क रहें। (यह भी ध्यान दें कि इसका गैर-पाठ तत्वों के साथ कोई उपयोग नहीं है।)

— मार्क अमेरी

afaik लेखन-मोड केवल पाठ पर काम करता है ...

— फ्रेड्रिक जोहानसन

Answer 1

यह मानते हुए कि आप 90 डिग्री को घुमाना चाहते हैं, यह संभव है, यहां तक ​​कि गैर-पाठ तत्वों के लिए भी - लेकिन CSS में कई दिलचस्प चीजों की तरह, इसमें थोड़ी चालाक की आवश्यकता होती है। मेरा समाधान तकनीकी रूप से CSS 2 युक्ति के अनुसार अपरिभाषित व्यवहार को भी आमंत्रित करता है - इसलिए जब मैंने क्रोम, फ़ायरफ़ॉक्स, सफारी और एज में काम किया है और पुष्टि की है, तो मैं आपसे वादा नहीं कर सकता कि यह भविष्य में नहीं टूटेगा ब्राउज़र रिलीज़।

संक्षिप्त जवाब

HTML को इस तरह दिया गया है, जहाँ आप घुमाना चाहते हैं .element-to-rotate...

<div id="container">
  <something class="element-to-rotate">bla bla bla</something>
</div>

... जिस तत्व को आप घुमाना चाहते हैं उसके चारों ओर दो आवरण तत्व लगाएं:

<div id="container">
  <div class="rotation-wrapper-outer">
    <div class="rotation-wrapper-inner">
      <something class="element-to-rotate">bla bla bla</something>
    </div>    
  </div>
</div>

... और फिर एंटी-क्लॉकवाइज़ को घुमाने के लिए (या टिप्पणी करने के transformलिए एक घड़ी के रोटेशन में बदलने के तरीके के लिए बाहर देखें) निम्न सीएसएस का उपयोग करें :

.rotation-wrapper-outer {
  display: table;
}
.rotation-wrapper-inner {
  padding: 50% 0;
  height: 0;
}
.element-to-rotate {
  display: block;
  transform-origin: top left;
  /* Note: for a CLOCKWISE rotation, use the commented-out
     transform instead of this one. */
  transform: rotate(-90deg) translate(-100%);
  /* transform: rotate(90deg) translate(0, -100%); */
  margin-top: -50%;

  /* Not vital, but possibly a good idea if the element you're rotating contains
     text and you want a single long vertical line of text and the pre-rotation
     width of your element is small enough that the text wraps: */
  white-space: nowrap;
}

ढेर स्निपेट डेमो

p {
  /* Tweak the visuals of the paragraphs for easier visualiation: */
  background: pink;
  margin: 1px 0;
  border: 1px solid black;
}
.rotation-wrapper-outer {
  display: table;
}
.rotation-wrapper-inner {
  padding: 50% 0;
  height: 0;
}
.element-to-rotate {
  display: block;
  transform-origin: top left;
  /* Note: for a CLOCKWISE rotation, use the commented-out
     transform instead of this one. */
  transform: rotate(-90deg) translate(-100%);
  /* transform: rotate(90deg) translate(0, -100%); */
  margin-top: -50%;

  /* Not vital, but possibly a good idea if the element you're rotating contains
     text and you want a single long vertical line of text and the pre-rotation
     width of your element is small enough that the text wraps: */
  white-space: nowrap;
}

<div id="container">
  <p>Some text</p>
  <p>More text</p>
  <div class="rotation-wrapper-outer">
    <div class="rotation-wrapper-inner">
      <p class="element-to-rotate">Some rotated text</p>
    </div>    
  </div>
  <p>Even more text</p>
  <img src="https://i.stack.imgur.com/ih8Fj.png">
  <div class="rotation-wrapper-outer">
    <div class="rotation-wrapper-inner">
      <img class="element-to-rotate" src="https://i.stack.imgur.com/ih8Fj.png">
    </div>
  </div>
  <img src="https://i.stack.imgur.com/ih8Fj.png">
</div>

यह कैसे काम करता है?

मेरे द्वारा ऊपर उपयोग किए गए विसंगतियों के सामने भ्रम उचित है; बहुत कुछ चल रहा है, और समग्र रणनीति सीधी नहीं है और समझने के लिए सीएसएस ट्रिविया के कुछ ज्ञान की आवश्यकता है। चलिए इसके माध्यम से कदम से कदम मिलाते हैं।

हम जिस समस्या का सामना कर रहे हैं उसका मूल यह है कि transformलेआउट के लागू होने के बाद इसकी सीएसएस संपत्ति का उपयोग करते हुए किसी तत्व पर लागू होने वाले परिवर्तन । दूसरे शब्दों में, transformकिसी तत्व का उपयोग उसके माता-पिता या किसी अन्य तत्व के आकार या स्थिति को बिल्कुल भी प्रभावित नहीं करता है। इस तथ्य को बदलने का कोई तरीका नहीं है कि कैसे transformकाम करता है। इस प्रकार, किसी तत्व को घुमाने और उसके माता-पिता की ऊँचाई को घूर्णन का सम्मान करने के लिए, हमें निम्नलिखित चीजों को करने की आवश्यकता है:

1. किसी तरह कुछ अन्य तत्व का निर्माण करें जिसकी ऊँचाई चौड़ाई के बराबर हो.element-to-rotate
2. हमारे परिवर्तन को .element-to-rotateऐसे लिखें जैसे कि चरण 1 से तत्व पर इसे ओवरले करना है।

चरण 1 से तत्व होगा .rotation-wrapper-outer। लेकिन हम अपने पैदा कर सकता है ऊंचाई के बराबर होना चाहिए .element-to-rotateकी चौड़ाई ?

हमारी रणनीति में प्रमुख घटक यहाँ है padding: 50% 0पर .rotation-wrapper-inner। इस कारनामे के लिए युक्तिpadding का एक विलक्षण विवरण है : वह प्रतिशत पैडिंग, यहां तक ​​कि padding-topऔर padding-bottomहमेशा तत्व के कंटेनर की चौड़ाई के प्रतिशत के रूप में परिभाषित किया जाता है । यह हमें निम्नलिखित दो चरण चाल करने में सक्षम बनाता है:

1. हमने सेट display: tableकिया .rotation-wrapper-outer। इसका कारण यह है कि इसमें फिट-टू-फिट चौड़ाई है , जिसका अर्थ है कि इसकी चौड़ाई इसकी सामग्री की आंतरिक चौड़ाई के आधार पर निर्धारित की जाएगी - यानी आंतरिक चौड़ाई पर आधारित है .element-to-rotate। (समर्थन करने वाले ब्राउज़र पर, हम के साथ और अधिक सफाई से इस लक्ष्य को हासिल कर सकता है width: max-content, लेकिन दिसंबर 2017 के रूप में, max-contentहै अभी भी एज में समर्थित नहीं ।)
2. हम 0 heightसे सेट करते हैं .rotation-wrapper-inner, फिर इसकी पैडिंग 50% 0(यानी 50% ऊपर और 50% नीचे) करते हैं। इसके कारण यह अपने माता-पिता की चौड़ाई के 100% के बराबर ऊर्ध्वाधर स्थान लेता है - जो कि चरण 1 में चाल के माध्यम से, की चौड़ाई के बराबर है .element-to-rotate।

इसके बाद, जो कुछ भी बचता है वह बाल तत्व की वास्तविक रोटेशन और स्थिति का प्रदर्शन करना है। स्वाभाविक रूप से, transform: rotate(-90deg)रोटेशन करता है; हम transform-origin: top left;घुमाए गए तत्व के शीर्ष-बाएँ कोने के चारों ओर होने के कारण रोटेशन का उपयोग करते हैं, जो बाद के अनुवाद को कारण के लिए आसान बनाता है, क्योंकि यह घुमाए गए तत्व को सीधे ऊपर छोड़ देता है जहां इसे अन्यथा खींचा जाता था। हम तत्पश्चात translate(-100%)इसके पूर्व-घूर्णन चौड़ाई के बराबर दूरी द्वारा तत्व को नीचे की ओर खींचने के लिए उपयोग कर सकते हैं ।

वह अभी भी स्थिति को ठीक नहीं करता है, क्योंकि हमें अभी भी 50% शीर्ष पैडिंग के लिए ऑफसेट करने की आवश्यकता है .rotation-wrapper-outer। हम सुनिश्चित करना है कि द्वारा प्राप्त .element-to-rotateहै display: block(ताकि मार्जिन उस पर ठीक से काम करेंगे) और फिर एक -50% लागू करने margin-topपर ध्यान दें कि प्रतिशत मार्जिन कर रहे हैं - यह भी पेरेंट तत्व की चौड़ाई के सापेक्ष परिभाषित किया।

और बस!

यह पूरी तरह से युक्ति-संगत क्यों नहीं है?

निम्नलिखित नोटों की वजह से कल्पना में प्रतिशत पैडिंग और मार्जिन की परिभाषा (मेरा खदान)

प्रतिशत के संबंध में गणना की जाती है चौड़ाई उत्पन्न बॉक्स के धारक ब्लॉक भी के लिए, 'गद्दी-टॉप' और 'padding-bottom' । यदि युक्त ब्लॉक की चौड़ाई इस तत्व पर निर्भर करती है, तो परिणामस्वरूप लेआउट CSS 2.1 में अपरिभाषित है।

चूँकि यह पूरी तरकीब घूमती है कि आंतरिक आवरण तत्व की पैडिंग उसके कंटेनर की चौड़ाई के सापेक्ष हो, जो कि उसके बच्चे की चौड़ाई पर निर्भर था, हम इस स्थिति को मार रहे हैं और अपरिभाषित व्यवहार को लागू कर रहे हैं। यह वर्तमान में सभी 4 प्रमुख ब्राउज़रों में काम करता है, हालांकि - कुछ प्रतीत होता है कि कल्पना करने के विपरीत-संगत टवीट्स जो मैंने कोशिश की हैं, जैसे कि माता-पिता .rotation-wrapper-innerके .element-to-rotateबजाय भाई-बहन बनना ।

Comments

मैंने इस क्षण के लिए उत्तर के रूप में स्वीकार किया। writing-modeयदि IE 11 समर्थित होने की जरूरत नहीं है समाधान का सबसे अच्छा तरीका हो जाएगा।

— क्रिस

उल्लेखनीय पकड़: 45deg जैसे अन्य रोटेशन के लिए काम नहीं करता है।

— ई। विलेगर

हालांकि स्वीकार किए जाते हैं, यह सही उत्तर नहीं है। लेखन-विधा का उपयोग कर उत्तर के लिए नीचे देखें।

— गिलश्लिट

@ mark-amery, मुझे अपने कोड के लिए CSS को एडजस्ट करना पड़ा: imgur.com/a/ZgafkgE 1 छवि आपके CSS के साथ, समायोजन के साथ 2 मैंने ट्रांसफॉर्मरिन को हटा दिया: 'टॉप लेफ्ट', और परिवर्तित ट्रांसफॉर्म: 'ट्रांसलेशन (100%) ) ', ट्रांसफॉर्म करने के लिए:' ट्रांसलेट (20%) ', <div style = {{flexDirection:' column ', alignItems:' सेंटर ',}}> <div style = {{डिस्प्ले:' टेबल ', मार्जिन: 30 ,}}> <div style = {{गद्दी: '50% 0 ', ऊँचाई: 0}}> <img src = {image} शैली = {{प्रदर्शन:' ब्लॉक ', मार्जिन:' -50% ', रूपांतर : 'रोटेट (-90deg) ट्रांसलेट (20%)', मैक्सिडथ: 300, मैक्सहाइट: 400,} /} </ div> </ div> <div> {title} </ div> </ div>

— Dan

Answer 2

जैसा कि G-Cyr द्वारा की गई टिप्पणी सही बताती है, वर्तमान समर्थन writing-modeसभ्य से अधिक है । एक सरल घुमाव के साथ संयुक्त, आपको सटीक परिणाम मिलता है जो आप चाहते हैं। नीचे दिए गए उदाहरण देखें।

.statusColumn {
  position: relative;
  border: 1px solid #ccc;
  padding: 2px;
  margin: 2px;
  width: 200px;
}

.statusColumn i,
.statusColumn b,
.statusColumn em,
.statusColumn strong {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
}

<div class="container">
  <div class="statusColumn"><span>Normal</span></div>
  <div class="statusColumn"><a>Normal</a></div>
  <div class="statusColumn"><b>Rotated</b></div>
  <div class="statusColumn"><abbr>Normal</abbr></div>
</div>

Comments

खुशी है कि मैंने नीचे स्क्रॉल किया - इसने मुझे रोटेशन और अनुवादों का उपयोग करके दर्द की दुनिया से बचाया।

— जेम्स मैकलॉघलिन

प्रश्न में पूछे गए रोटेशन को प्राप्त करने के लिए, उपयोग करेंwriting-mode: vertical-lr; transform: rotate(180deg);

— जेम्स मैकलॉघलिन

Answer 3

दुर्भाग्य से (?) यह है कि यह कैसे काम करने के लिए लगता है भले ही आप अपने तत्व को घुमाते हैं फिर भी इसकी निश्चित चौड़ाई और ऊंचाई है, जो रोटेशन के बाद नहीं बदलता है। आप इसे नेत्रहीन रूप से बदलते हैं, लेकिन कोई अदृश्य रैपिंग बॉक्स नहीं है जो चीजों को घुमाते समय इसका आकार बदलता है।

कल्पना करें कि इसे ९ ० ° (जैसे transform: rotate(45deg)) से कम घुमाने के लिए : आपको ऐसे अदृश्य बॉक्स को पेश करना होगा, जिसमें अब आपके द्वारा घूमने वाली वस्तु के मूल आयामों और वास्तविक रोटेशन मूल्य के आधार पर अस्पष्ट आयाम हों।

अचानक, आप केवल नहीं है widthऔर heightवस्तु आप घुमाया है की, लेकिन आप यह भी है widthऔर heightइसके चारों ओर "अदृश्य बॉक्स" की। इस ऑब्जेक्ट की बाहरी चौड़ाई का अनुरोध करने की कल्पना करें - यह क्या लौटेगा? वस्तु की चौड़ाई, या हमारा नया बॉक्स? हम दोनों में अंतर कैसे करेंगे?

इसलिए, कोई सीएसएस नहीं है कि आप इस व्यवहार को ठीक करने के लिए लिख सकते हैं (या मुझे यह कहना चाहिए, "इसे स्वचालित करें")। बेशक आप अपने माता-पिता के कंटेनर का आकार हाथ से बढ़ा सकते हैं, या इसे संभालने के लिए कुछ जावास्क्रिप्ट लिख सकते हैं।

(बस स्पष्ट होने के लिए, आप element.getBoundingClientRectपहले उल्लेखित आयत प्राप्त करने के लिए उपयोग करने का प्रयास कर सकते हैं )।

जैसा कि कल्पना में वर्णित है :

HTML नामस्थान में, परिवर्तित गुण रूपांतरित तत्व के आसपास की सामग्री के प्रवाह को प्रभावित नहीं करता है।

इसका मतलब है कि जब तक आप उन्हें हाथ से नहीं करेंगे, तब तक आपके द्वारा परिवर्तित की जा रही वस्तु के आसपास कोई बदलाव नहीं किया जाएगा।

जब आप अपनी वस्तु को बदलते हैं तो केवल वही चीज ध्यान में रखी जाती है, जो अतिप्रवाह क्षेत्र है:

(...) अतिप्रवाह क्षेत्र की सीमा रूपांतरित तत्वों को ध्यान में रखती है। यह व्यवहार है के लिए इसी तरह क्या होता है जब तत्वों के माध्यम से भरपाई हो सापेक्ष स्थिति ।

और जानने के लिए यह jsfiddle देखें।

वास्तव में इस स्थिति की तुलना किसी वस्तु को ऑफसेट करने के लिए करना बहुत अच्छा है: position: relative- आस-पास की सामग्री नहीं बदलती, भले ही आप अपनी वस्तु को चारों ओर ले जा रहे हों ( उदाहरण )।

यदि आप जावास्क्रिप्ट का उपयोग करके इसे संभालना चाहते हैं, तो इस प्रश्न पर एक नज़र डालें ।

Comments

मैं कहूंगा कि एक सामान्य यूआई फ्रेमवर्क में आपके माता-पिता की चौड़ाई और ऊंचाई को बच्चे के बाउंडिंग बॉक्स की चौड़ाई और ऊंचाई के चारों ओर लपेटा जाना चाहिए जो कि आपके द्वारा बच्चे के घुमावों के रूप में उल्लिखित है। बच्चों की चौड़ाई और ऊंचाई रोटेशन से पहले उनकी चौड़ाई और ऊंचाई है और माता-पिता की चौड़ाई और ऊंचाई बच्चों के बॉक्स द्वारा परिभाषित की गई है। यह बहुत ही बुनियादी है और मैं कहूंगा कि CSS / HTML को इस तरह से काम करना चाहिए ... अगर कोई भी इस विषय पर सवाल नहीं पूछता था जो केवल हैक के साथ असंतोषजनक शिष्टाचार में तय किया जा सकता है।

— user18490

Answer 4

paddingसामग्री को पुश करने के लिए प्रतिशत और छद्म तत्व का उपयोग करें । JSFiddle में मैंने इसे दिखाने के लिए छद्म तत्व को लाल छोड़ दिया है और आपको पाठ की शिफ्ट की भरपाई करनी होगी लेकिन मुझे लगता है कि यही रास्ता है।

.statusColumn {
    position: relative;
    border: 1px solid #ccc;
    padding: 2px;
    margin: 2px;
    width: 200px;
}

.statusColumn i, .statusColumn b, .statusColumn em, .statusColumn strong {
  writing-mode: tb-rl;
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);

  /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  /* Should be unset in IE9+ I think. */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.statusColumn b:before{ content:''; padding:50% 0; display:block;  background:red; position:relative; top:20px
}

<div class="container">
    <div class="statusColumn"><span>Normal</span></div>
    <div class="statusColumn"><a>Normal</a></div>
    <div class="statusColumn"><b>Rotated</b></div>
    <div class="statusColumn"><abbr>Normal</abbr></div>
</div>

http://jsfiddle.net/MTyFP/7/

इस समाधान का राइट-अप यहां पाया जा सकता है: http://kizu.ru/en/fun/rotated-text/

Comments

इस समाधान के साथ दिक्कत यह है कि अपने मूल तत्व चौड़ाई रखता है, इसलिए में (उदाहरण के लिए) एक मेज, अगर यह व्यापक सेल था, यह उस स्तंभ बाहर विस्तृत अनावश्यक खाली स्थान के उस के साथ धक्का होगा होगा शामिल किया गया है, तो पाठ था नहीं घुमाया गया। यह परेशान करने वाला है।

— Jez

@litek, क्या आप jsfiddle.net/MTyFP/7 पर एक नज़र डाल सकते हैं ? मैं छवि के साथ लगभग एक ही मुद्दा रहा हूँ। प्रश्न: stackoverflow.com/questions/31072959/…

— अवध लिटन

Answer 5

कृपया मेरे अन्य उत्तर में अद्यतन संस्करण देखें । यह उत्तर अब मान्य नहीं है और बस कोई काम नहीं करता है। मैं इसे ऐतिहासिक कारणों से यहाँ छोड़ दूँगा।

---

यह प्रश्न काफी पुराना है, लेकिन .getBoundingClientRect()वस्तु और इसके मूल्यों widthऔर heightमूल्यों के लिए वर्तमान समर्थन के साथ transform, इस स्वच्छ विधि का एक साथ उपयोग करने की क्षमता के साथ , मुझे लगता है कि मेरे समाधान का भी उल्लेख किया जाना चाहिए।

इसे यहां कार्रवाई में देखें । (क्रोम 42, एफएफ 33 और 37 में परीक्षण किया गया।)

getBoundingClientRectतत्व की वास्तविक बॉक्स चौड़ाई और ऊंचाई की गणना करता है । काफी बस, फिर, हम सभी तत्वों के माध्यम से लूप कर सकते हैं और इसकी न्यूनतम ऊंचाई को उनके बच्चों की वास्तविक बॉक्स ऊंचाई पर सेट कर सकते हैं।

$(".statusColumn").each(function() {
    var $this = $(this),
        child = $this.children(":first");
    $this.css("minHeight", function() {
        return child[0].getBoundingClientRect().height;
    });
});

(कुछ संशोधन के साथ आप बच्चों के माध्यम से लूप कर सकते हैं और पता लगा सकते हैं कि कौन सा सबसे लंबा है और सबसे लंबा बच्चा माता-पिता की ऊंचाई निर्धारित करता है। हालांकि, मैंने उदाहरण को और अधिक सरल बनाने का फैसला किया। आप माता-पिता की गद्दी को भी जोड़ सकते हैं। ऊँचाई यदि आप चाहते हैं, या आप box-sizingCSS में एक प्रासंगिक मूल्य का उपयोग कर सकते हैं ।)

ध्यान दें, हालांकि, मैंने स्थिति को और अधिक लचीला और सटीक बनाने के लिए अपने सीएसएस में एक translateऔर जोड़ दिया transform-origin।

transform: rotate(-90deg) translateX(-100%);
transform-origin: top left;

Comments

वास्तव में? JQUERY उत्तर के साथ एक css प्रश्न और आप इसे एक पूर्ण उत्तर @MichaelLumbroso कहते हैं? यह हां में काम करता है, लेकिन जावास्क्रिप्ट या संपूर्ण js पुस्तकालय की आवश्यकता नहीं है जैसे jQuery

— नेबुलसर

@ नेबुलसर अच्छी खुदाई। उस समय (पहले से ही ढाई साल पहले!) यह एकमात्र उत्तर था जिसने स्थिति या छद्म तत्वों के साथ किसी भी मुद्दे को ठीक से काम नहीं किया। सौभाग्य से, कुछ गुणों के लिए ब्राउज़र समर्थन में सुधार हुआ है। कृपया मेरा संपादन देखें।

— ब्रैम वेनरो

यह अनिवार्य रूप से एक में दो पूरी तरह से असंबंधित उत्तर हैं। यह पूरी तरह से एक प्रश्न के कई उत्तर पोस्ट करने के नियमों के भीतर है; मुझे लगता है कि यह बेहतर होता अगर 2017 में आपका नया समाधान एक नया उत्तर होता, ताकि दो पूरी तरह से अलग-अलग उत्तरों को अलग-अलग वोट दिया जा सके और टिप्पणी की जा सके।

— मार्क ऐमी

@MarkAmery आप सही हैं। मैंने प्रश्न को संपादित किया और यहां एक नया उत्तर जोड़ा ।

— ब्रैम वानरो

मैं इस उत्तर का उपयोग करने में सक्षम था और छवि भार घटना का उपयोग करके छवियों के लिए एक काम कर समाधान प्राप्त करने के लिए: $ pic.on ('load', function () {$ pic.css ('min-height', $ pic [0] .getBoundingClientRect ()। ऊँचाई);});

— Miika एल।

Answer 6

मुझे पता है कि यह एक पुरानी पोस्ट है लेकिन मैंने इसे उसी समस्या से जूझते हुए पाया। समाधान जो मेरे लिए काम करता है, बल्कि कच्चे "कम-तकनीक" विधि द्वारा बस उस div को घेर लेता है जिसे मैं 90deg से बहुत अधिक घुमाता हूं

<br>

Div की अनुमानित चौड़ाई (जो रोटेशन के बाद ऊँचाई हो जाती है) को जानकर, मैं इस div के चारों ओर br को जोड़कर अंतर की भरपाई कर सकता हूँ ताकि ऊपर और नीचे की सामग्री तदनुसार पुश हो जाए।

Comments

हो सकता है कि यह काम करे लेकिन आपको ऐसा कभी नहीं करना चाहिए।

— MMM

आपकी प्रतिक्रिया के लिए धन्यवाद! हां, एक बेहतर तरीका है कि मैं पिंड में ऊंचाई को समायोजित करने के लिए div के मार्जिन-टॉप प्रॉपर्टी का उपयोग करता हूं जब ऑब्जेक्ट घुमाया जाता है।

— vic_sk