Question

我的博客只有一个内容列（没有侧边栏）。我想要一些图像在屏幕的整个宽度上伸展（就像使用Medium - ＆gt; https://medium.com/@rapsli/zum-himmelstor-und-wieder-zur%C3%BCck-635dd7012c5f一样）。我知道还有额外的标记。

我给出的标记如下。目标是使图像在整个屏幕上延伸，同时文本保留在列中。

.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>

我试图让这个类成为“完整”的位置：绝对并拉伸它。这有效，但显然也涵盖了图像后面的文字。

也许有某种jquery插件可以实现神奇（根据需要添加额外的标记？）。我有点被困在这里。欢迎任何帮助。

更新：这是Zurb网格系统

更新：内容来自CMS。图像的宽度和高度是未知的。变量

Answer 1

这是我现在的解决方案，依赖于Javascript

$(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非常简单：

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

在内容列上延伸的图像（如在Medium中）

1 个答案: