我在 Singularity 中构建了以下内容
1/3 宽图像旁边是 2/3 宽图像，下一行则相反。图像配有图片填充。但是我的问题是，当我将视口从容器最大宽度缩小到断点（750px）时，图像从两个“列”布局切换到一列，即使源文件具有完全相同的物理高度，它的高度也不同像素高度。它们有时相差几个像素，有时只有一个。
后面的简化设置如下（省略了视网膜标记和中间的 2 个断点）：
<section class="pro-main" role="main">
<section class="pro-thirds">
<article class="pro-samples imgparent">
<a class="p-ov-liner" href="#">
<span data-picture data-alt="onethird">
<span data-src="/img/projekte-gpfinestsolution-zweidrittel-659x324.jpg"></span>
<span data-src="/img/projekte-gpfinestsolution-eindrittel-341x347.jpg" data-media="(min-width: 750px)"></span>
<noscript><img src="/img/projekte-gpfinestsolution-zweidrittel-659x324.jpg" alt="img1"></noscript>
</span>
<div class="bottombox"></div>
</a>
</article>
<article class="pro-samples imgparent">
<a class="p-ov-liner" href="#">
<span data-picture data-alt="twothird">
<span data-src="/img/projekte-gplab-zweidrittel-659x324.jpg"></span>
<span data-src="/img/projekte-gplab-zweidrittel-704x347.jpg" data-media="(min-width: 750px)"></span>
<noscript><img src="/img/projekte-gplab-zweidrittel-659x324.jpg" alt="twothird"></noscript>
</span>
<div class="bottombox"></div>
</a>
</article>
<article class="pro-samples imgparent">
<a class="p-ov-liner" href="#">
<span data-picture data-alt="twothird">
<span data-src="/img/projekte-gplab-zweidrittel-659x324.jpg"></span>
<span data-src="/img/projekte-gplab-zweidrittel-704x347.jpg" data-media="(min-width: 750px)"></span>
<noscript><img src="/img/projekte-gplab-zweidrittel-659x324.jpg" alt="twothird"></noscript>
</span>
<div class="bottombox"></div>
</a>
</article>
<article class="pro-samples imgparent">
<a class="p-ov-liner" href="#">
<span data-picture data-alt="onethird">
<span data-src="/img/projekte-gpfinestsolution-zweidrittel-659x324.jpg"></span>
<span data-src="/img/projekte-gpfinestsolution-eindrittel-341x347.jpg" data-media="(min-width: 750px)"></span>
<noscript><img src="/img/projekte-gpfinestsolution-zweidrittel-659x324.jpg" alt="img1"></noscript>
</span>
<div class="bottombox"></div>
</a>
</article>
</section>
</section>
断点和奇点设置如下：
// Baseline breaks
$baseline675: 675px 849px;
$baseline850: 850px 1074px;
$baseline1075: 1075px 1199px;
$baselineMAX: 1200px;
// Container breaks
$container600: 600px;
$container750: 750px;
$container850: 850px;
$container990: 990px;
$container1100: 1100px;
$container1200: 1200px;
// Singularity
$grids: 6;
$grids: add-grid(9 at 675px);
$grids: add-grid(12 at 850px);
$grids: add-grid(15 at 1075px);
$grids: add-grid(18 at 1200px);
$gutters: 1/3;
$output:'isolation';
样式：
.pro-main,
.pro-thirds {
@extend %clearfix;
}
.pro-samples {
@include trailer(0.5);
&:last-child {
@include trailer(2);
}
@include switch-baseline(850px 1074px) {
&:nth-child(4n+1) {
@include isolation-span(4, 1, 'right', $gutter:.5);
}
&:nth-child(4n+4) {
@include isolation-span(4, 9, 'right', $gutter:0);
}
&:nth-child(4n+2) {
@include isolation-span(8, 5, 'right', $gutter:0);
}
&:nth-child(4n+3) {
@include isolation-span(8, 1, 'right', $gutter:.5);
}
&:last-child {
@include trailer(2);
}
}
@include breakpoint(1075px 1199px) {
&:nth-child(4n+1) {
@include isolation-span(5, 1, 'right', $gutter:.5);
}
&:nth-child(4n+4) {
@include isolation-span(5, 11, 'right', $gutter:0);
}
&:nth-child(4n+2) {
@include isolation-span(10, 6, 'right', $gutter:0);
}
&:nth-child(4n+3) {
@include isolation-span(10, 1, 'right', $gutter:.5);
}
&:last-child {
@include trailer(2);
}
}
@include breakpoint(1200px) {
&:nth-child(4n+1) {
@include isolation-span(6, 1, 'right', $gutter:.5);
}
&:nth-child(4n+4) {
@include isolation-span(6, 13, 'right', $gutter:0);
}
&:nth-child(4n+2) {
@include isolation-span(12, 7, 'right', $gutter:0);
}
&:nth-child(4n+3) {
@include isolation-span(12, 1, 'right', $gutter:.5);
}
&:last-child {
@include trailer(2);
}
}
}
在最大宽度的三分之一和三分之二图像的高度之间，它们在物理上是相同的，并且它们在底线对齐。在较小的视口上，它们有所不同。如果我移除带有图片的排水沟，高度仍然不同。例如
@include breakpoint(1075px 1199px) {
&:nth-child(4n+1) {
@include isolation-span(5, 1, 'right', $gutter:0);
}
&:nth-child(4n+4) {
@include isolation-span(5, 11, 'right', $gutter:0);
}
&:nth-child(4n+2) {
@include isolation-span(10, 6, 'right', $gutter:0);
}
&:nth-child(4n+3) {
@include isolation-span(10, 1, 'right', $gutter:0);
}
&:last-child {
@include trailer(2);
}
}
如果我使用，而不是图片填充标记，只需清空文章标签并将这两个属性从上方添加到 scss，无论它们是 1/3 还是 2/3，所有文章元素的高度都保持完全相同。
background:red
height:10em;
带排水沟：
并且没有：
有谁知道什么可能导致视口上的高度差异？我自己完全没有想法。:(
最好的问候拉尔夫