Два изображения с одинаковой высотой физического пикселя имеют смещение по высоте.
Я построил следующее в Singularity 
1/3 широкого изображения рядом с 2/3 широким изображением, а в следующей строке наоборот. Изображения подаются с картинкой. Но моя проблема в том, что когда я сужаю область просмотра вниз от максимальной ширины контейнеров до точки останова (750 пикселей), где изображения переключаются с разметки "два столбца" на один столбец, он отличается по высоте, даже если исходные файлы имеют точно такой же физический высота в пикселе. Они отличаются иногда несколькими пикселями, иногда только одним.
Ниже приведена уменьшенная настройка (пропущена разметка сетчатки и 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);
}
}
Если я использую вместо разметки picturefill, просто опустошу теги article и добавлю эти два свойства в scss сверху, высота останется одинаковой на всех элементах article, независимо от того, будут ли они 1/3 или 2/3.
background:red
height:10em;
с желобом:
и без:
У кого-нибудь есть идея, что может вызывать эту разницу в высоте по областям просмотра? Я для себя полностью вне идей.:(
С наилучшими пожеланиями, Ральф
1 ответ
Причина разницы в высоте изображений
Причина различий в высоте изображений - математическая.
Для простоты, давайте посмотрим на следующую систему столбцов:
@include add-grid(4);
@include add-gutter(0.1);
Вышеприведенное определение означает: четыре столбца одинаковой ширины, а между ними три (4 - 1) желоба. Каждый желоб имеет ширину, равную 0,1 ширины любого столбца.
Теперь, учитывая, что ширина контейнера составляет 1000 пикселей, какова будет ширина каждого столбца и каждого желоба?
Допустим, что столбец имеет ширину x px. Тогда желоб будет иметь ширину 0,1х пикселей. Мы можем собрать уравнение:
4x + 3*(0.1x) = 1000
Давайте решим это:
4x + 0.3x = 1000
4.3x = 1000
x = 1000 / 4.3
x = 232.56
Каждый столбец имеет ширину ~232,56 пикселей! И каждый желоб имеет ширину 232,56 * 0,1 = 23,256 пикселей.
Теперь предположим, что у нас есть два изображения: 250x250 пикселей и 750x250 пикселей, и мы помещаем их в эти столбцы.
Первое изображение будет занимать один столбец и нулевые желоба. Его ширина и высота будут равны 232,56 пикселей.
Второе изображение будет занимать три столбца и два желоба между этими столбцами. Его ширина будет равна 232,56 * 3 + 23,256 * 2 = 744,192 пикселей. Высота второго изображения будет равна 250 * 744,192 / 750 = 248,064 пикселей.
Как видите, высота изображений не совпадает, и это ожидается.
Решение проблемы
Вы можете использовать составную сетку, чтобы компенсировать разницу в высоте. Это гораздо сложнее рассчитать.
Более простое решение - нарезать ваши изображения в соответствии с существующей сеткой!
Общие рекомендации по разметке вашей сетки.
Вы используете много определений сетки для разных точек останова, но для всех их (кроме мобильного представления) у вас одинаковый макет.
Вам не нужно переопределять сетки для каждой точки останова. Фактически, ваш отзывчивый макет может быть уменьшен до этого определения:
+add-grid(3); +add-gutter(0.5);Для мобильного макета не применяйте никаких интервалов. Для макетов, начинающихся с наименьшей точки останова, примените пролеты, и все готово.
Обратите внимание, что вы все равно можете применить несколько точек останова для других стилей, например, ширины контейнера.
Чтобы охват изоляции работал с несколькими строками, примените очистку для первого дочернего элемента в каждой строке:
&:nth-child(3n+1) { clear: both; }Примечание: это должно быть сделано ПОСЛЕ применения миксина span Singularity span, например:
&:nth-child(3n+1) { +grid-span(1,1); clear: both; }Вы можете использовать общий
grid-spanмиксин вместо конкретногоisolation-span, Изоляция является методом охвата по умолчанию дляgrid-spanMixin.Не переопределяйте направление и желоба для каждого смешанного вызова, если только вы не пытаетесь расположить элементы вне объявленной сетки.
Не используйте различные размеры желоба для соседних элементов, иначе это испортит математику.
Не применяйте повторяющиеся стили под каждый медиазапрос. В идеале каждое правило CSS должно быть объявлено только один раз. Вы можете создать более конкретные правила медиа-запросов, если это необходимо, вместо дублирования стилей.
UPD: Да, и помните, что вы можете объявить столбцы и желоба в следующем формате:
+add-grid(235 235 235 235); +add-gutter(20);Это идентично
+add-grid(4); +add-gutter(0.085);но делает понимание чисел намного проще.