विचार करने के लिए है फोकस भीतर एक DIV, एक छवि के साथ निरपेक्ष स्थिति { स्थिति: निरपेक्ष; }. ऐसा करने के लिए, सबसे पहले है असाइन करें, करने के लिए div कि छवि शामिल होंगे, एक स्थिति रिश्तेदार, इस प्रकार की छवि absolute पोजिशनिंग को रोकने है कि सापेक्ष स्थिति है तत्व पैरेंट कंटेनर के लिए अगले, या विफल रहने, करने के लिए शरीर.
सोचते हैं कि हम निम्नलिखित कोड के साथ एक div और छवि का एक ही किया:
1 2 3 | <div class="contenedor"> <img class="imagen" src="" /> </div> |
कंटेनर और छवि के लिए लागू की गई शैली निम्नानुसार है:
1 2 3 4 5 6 7 8 9 10 11 | .contenedor { position: relative; } .imagen { position:absolute; left:0px; right:0px; top:0px; margin:auto; } |
कुछ के साथ परिणाम देखने के लिए उदाहरण, हम करने के लिए जा रहे हैं संशोधित करें HTML कोड असाइन करके एक किनारे और एक आकार करने के लिए div, जोड़ने के साथ ही एक मार्ग और एक आकार करने के लिए छवि. यह कुछ इस तरह दिखेगा:
1 2 3 4 5 | <div class="contenedor" style="border:1px solid orange;width:100%;max-width:500px;height:400px;"> <img class="imagen" src="https://professor-falken.com/wp-content/uploads/2016/04/10-fondos-de-pantalla-para-que-uses-en-WhatsApp-Telegram-o-tu-aplicacion-de-mensajeria-favorita-Image-5-professor-falken.com_.jpg" style="width:200px;" /> </div> |
और, उसके बाद, परिणाम:
हमें एक टिप्पणी छोड़ दो या करने के लिए दर्ज करेंफोरम
