Negatif marjı

Question

Bu (basitleştirilmiş) durum var:

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

Ve:

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

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

Bu şekilde, hep .page-content içinde bir dolgu var div (burada kopyaladığımdan çok daha fazlasını içerir). Resimler, sayfanın genişliğinden daha fazla olamaz, dolgu eksi.

Her boyutta mükemmel çalışır.

Örnek:

Ancak, ben bir telefon ekranında (üst 20px dolgu atlayarak) ne zaman görüntüleri tam genişliğini yapmak istiyorum.

yani: ebeveyn (<p>) negatif marjı (margin: 0 -20px;) vardı, ama html dosyası bir markdown dosyadan Jekyll tarafından oluşturulan eğer benim sorunu çözmek olabilir

ve ben sınıf ekleyemez.

.page-content'un dolgularını kaldırmanın ve her bir çocuğa ayarlamanın dışında, bunu yapmanın bir yolunu bulamıyorum. Hangisini yapmak istemiyorum.

Sabit bir genişlik ayarlayamıyorum çünkü bunun her ekran boyutunda çalışmasını istiyorum.

CSS'de üst öğeyi seçmenin bir yolu var mı? Ya da habersiz başka bir özellik?

Teşekkürler.

Answer 1

Kendi sorunuza cevap verdiniz. Yastığı çıkarın ve çocuk elemanlarına yerleştirin. (ya da çocuk elemanlarındaki marjı kullanın, çünkü bu gerçekten ne kadar sonradır) Bu en iyi çözümdür.

Alternatifler: konumdaki konumlandırma: mutlak; Bu, ebeveyninin akışından çıkarır ve böylece dolguyu göz ardı eder, ancak görüntünün nereye gitmesi gerektiğini tam olarak bilmeniz gerekir. Seçenek 1 çok daha iyi.

Answer 2

yanı sıra Sen bağlayan cihazda css bağımlı değiştirebilir yukarıdaki suggections (ortam ne emin değilim senin kullanarak) ya da bu yaklaşımı

yapıyor eğer ekran Hintçe genişliğine göre dikkatle vb ekran boyutlarına dikkate almak gerekir

ie
@media ekranı ve (maks. Genişlik: 400 piksel) { p {margin: 0 -20px; }

Muhtemelen p'den daha spesifik olmak isteyebilirsiniz.

Answer 3

Resimler garip şekillerde davranır. Aynı şeyi başarmaya çalıştım ama zor buldu.Bunun yerine, bir div ile görüntü sarma sona erdi ve kutu boyutlandırma ekledi: border-kutusu ve marjı: 0 - @ your-negatif marjlı

<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); 
} 

Ben margin-left & içine kireci koymak Doğru, eğer calc işlevi tarayıcı tarafından uygulanmadıysa, tasarımı bozmaz.

Answer 5

Kullanım the accepted solution from here ve marj tutmak için büyük ekranlara maddesi için bir @media sorgusunu ekleyin:

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

Ayrıca, img üzerinde width=100%; koydu.