Bilder, die sich über die Inhaltsspalte erstrecken (wie in Medium)

Question

Mein Blog hat nur eine einzige Inhaltsspalte (keine Seitenleisten). Ich möchte, dass sich einige Bilder über die gesamte Breite des Bildschirms erstrecken (wie es mit Medium möglich ist ->https://medium.com/@rapsli/zum-himmelstor-und-wieder-zur%C3%BCck-635dd7012c5f). Ich weiß, dass es zusätzliche Markups gibt.

Das Markup, das ich erhalten habe, ist das folgende. Ziel ist es, das Bild über den gesamten Bildschirm strecken zu lassen, während der Text in der Spalte bleibt.

.row { 
 
    max-width: 43.75rem; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
.column, .columns { 
 
    padding-left: .625rem; 
 
    padding-right: .625rem; 
 
    width: 100%; 
 
    float: left; 
 
} 
 

 
.small-12 { 
 
    width: 100%; 
 
}

<div class="row"> 
 
       
 
     <div class=""> 
 
      <article class="post column small-12"> 
 
      <section class="post--body"> 
 
       
 
     <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> 
 
     <p><img src="http://portugalresident.com/sites/default/files/field/image/gruta_benagil.jpg" alt="" class="full"></p> 
 
     <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> 
 
     <h3>A title</h3> 
 
     <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> 
 
      </section> 
 
      </article> 
 
     </div> 
 
    </div>

Ich habe versucht, die Klasse "voll" Position zu machen: absolute und strecken es. Das funktioniert, deckt aber offensichtlich auch den Text ab, der nach dem Bild kommt.

Vielleicht gibt es eine Art von jQuery-Plugin, das die Magie tut (Hinzufügen von zusätzlichen Markup wie benötigt?). Ich bin hier irgendwie festgefahren. Jede Hilfe ist willkommen.

Update: Es ist der ZURB Grid-System

Update: Der Inhalt von einem CMS kommt. Die Breite und Höhe des Bildes ist unbekannt bzw. Variable.

Answer 1

Hier ist meine Lösung für jetzt, auf Javascript angewiesen

$(document).ready(function(){ 
$('.full').each(function(){ 
    var height = $(this).height(); 
    if ($(this).parent().prop('tagName') == 'P') { 
     $(this).parent().next().css('margin-top', height + 100 + 'px');  
    } 

    else { 
    $(this).next().css('margin-top', height + 100 + 'px');  
    } 

})  
}) 

CSS, die mit ihm geht, ist ziemlich geradlinig:

article img.full, article iframe.full { 
position: absolute; 
left: 0; 
width: 100%; 
}