नकारात्मक मार्जिन

Question

मैं इस (सरलीकृत) स्थिति है:

<div class="page-content"> 
    <p>text</p> 
    <p><img src="" /></p> 
    <p>text</p> 
    <!-- ... --> 
</div> 

और:

.page-content { 
    padding: 0 20px; 
} 

.page-content img { 
    display: block; 
    margin: 0 auto; 
    max-width: 100%; 
} 

इस तरह, मैं हमेशा अपने .page-content अंदर एक गद्दी है div (जिसमें मैंने यहां कॉपी की तुलना में बहुत कुछ शामिल किया है)। छवियां पृष्ठ की चौड़ाई से अधिक नहीं ले सकती हैं, पैडिंग को घटाएं।

यह किसी भी स्क्रीन आकार पर बहुत अच्छा काम करता है।

उदाहरण:

हालांकि, मैं जब एक फ़ोन स्क्रीन पर (मूल 20px गद्दी छोड़कर) छवियों पूर्ण-चौड़ाई बनाना चाहते हैं।

अर्थात्:

मैं अपने समस्या को हल कर सकता है माता-पिता (<p>) एक नकारात्मक मार्जिन (margin: 0 -20px;) था, लेकिन html फ़ाइल एक markdown फ़ाइल से Jekyll द्वारा उत्पन्न होता है, और मैं इसमें कक्षाएं नहीं जोड़ सकते हैं।

मुझे .page-content के पैडिंग को हटाने और इसे प्रत्येक बच्चे पर सेट करने के अलावा, ऐसा करने का कोई तरीका नहीं मिल रहा है। जो मैं नहीं करना चाहूंगा।

मैं निश्चित चौड़ाई निर्धारित नहीं कर सकता क्योंकि मैं चाहता हूं कि वह प्रत्येक स्क्रीन आकार पर काम करे।

क्या सीएसएस में माता-पिता का चयन करने का कोई तरीका है? या एक और विशेषता मुझे अनजान है?

धन्यवाद।

Answer 1

आपने अपने प्रश्न का उत्तर दिया है। पैडिंग निकालें और इसे बाल तत्वों पर सेट करें। (या बच्चे के तत्वों पर मार्जिन का उपयोग करें क्योंकि वास्तव में आपका क्या है) यह सबसे अच्छा समाधान है।

विकल्प: आप छवि पर स्थिति का उपयोग कर सकते हैं जैसे स्थिति: पूर्ण; यह इसे अपने माता-पिता के प्रवाह से बाहर ले जाएगा और इसलिए पैडिंग को अनदेखा कर देगा, हालांकि आपको यह जानना होगा कि छवि को कहां जाना है। विकल्प 1 बहुत बेहतर है।

Answer 2

के साथ-साथ suggections ऊपर आप डिवाइस को जोड़ने पर सीएसएस निर्भर बदल सकता है (यकीन है कि क्या पर्यावरण नहीं अपने प्रयोग करके) या स्क्रीन हालांकि की चौड़ाई से आप अगर इस दृष्टिकोण

कर ध्यान से स्क्रीन आकार पर विचार करने की जरूरत है आदि

यानी
@media स्क्रीन और (अधिकतम-चौड़ाई: 400 पीएक्स) { पी {मार्जिन: 0 -20 पीएक्स; } }

आप शायद पी से अधिक विशिष्ट होना चाहते हैं।

Answer 3

छवियां अजीब तरीकों से व्यवहार करती हैं। मैंने एक ही चीज़ को पूरा करने की कोशिश की लेकिन इसे मुश्किल पाया।इसके बजाय, मैं एक div के साथ छवि लपेटकर समाप्त हो गया और बॉक्स आकार कहा: सीमा-बॉक्स और मार्जिन: 0 - @ अपने नकारात्मक मार्जिन

<div><img /></div> 


div { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    margin: 0 -1rem; 
} 

div > img { 
    width: 100%; 
    margin: auto; 
} 

Answer 4

img { 
    width: calc(100% + 40px); 
    margin-left: calc(-20px); 
    margin-right: calc(-20px); 
} 

मैं मार्जिन छोड़ दिया & अंदर calc डाल सही क्योंकि यदि ब्राउज़र द्वारा कैल्क फ़ंक्शन लागू नहीं किया गया है, तो यह डिज़ाइन को तोड़ नहीं देता है।

Answer 5

उपयोग the accepted solution from here और बड़े प्रदर्शित करता है के लिए माध्यम के लिए एक @media क्वेरी जोड़ना मार्जिन रखने के लिए:

@media screen and (min-width: 600px) { 
    .img-wrapper { 
    margin: 0 0; 
    } 
} 

इसके अलावा, आपके img पर width=100%; डाल दिया।