Это называется округлением пикселей или проблемой подпикселей, и это основная математическая проблема:
У вас есть два контейнера с относительной шириной ~ 50%, которые находятся внутри отзывчивого родителя. Что должно произойти, если ширина родительского элемента является нечетным числом? Скажите 211 пикселей. 50% из 211px - это 105.5px. НО, нет такой вещи, как .5px - Ваш экран просто не может включить только половину той маленькой лампочки, которая физически определяет пиксель. Браузер округляет его до большего или меньшего числа.
Если вы посмотрите внимательно, компоновка состоит из:
- Столбцы с десятичными значениями% для ширины (49,35%)
- Десятичный% для интервала (заполнение: 2.330294%)
- Изображения со случайной шириной и высотой
- Не определена высота ни для одного из столбцов.
- Все перенесеноотзывчивый элемент div, что означает отсутствие абсолютной ширины или высоты в любом месте.
Просто не существует решения для вставки изображений с различными размерами в элементы Div с различными размерами внутри%-ориентированного макета. Это просто слишком много пикселей округления для учета. Если вы посмотрите внимательно, этот макет будет « сломан » в 100% случаев ... он либо оставляет пустые пиксели, либо сжимает / искажает изображения внутри.
Какой бы взлом ни был у кого-либо,сгенерируйте этот маленький пустой пиксель, исказите изображения (опять же, они не имеют одинаковую высоту или ширину) или тайно спрячьте пиксели от изображения где-либо.
Теперь быстрый взлом для конкретного сниппета, который выпредставлено:
- использовать абсолютный px для отступа влево
- добавить пустую прокладку в нижнее заполнение с помощью: после
img {
vertical-align: bottom;
}
.column {
position: relative;
}
.column:after {
content: '';
display: block;
position: absolute;
bottom: 0;
width: 100%;
background: #fff;
height: 6px; /* this will fake padding bottom */
}
.row {
padding-left: 6px;
}
<div style="width:100%;">
<div style="width:60%; display: flex; margin-left: auto; margin-right: auto;">
<div id="outterrow" style="width:100%; float:left; display: flex;">
<div class="column" style="float: left;overflow: hidden;background-color: inherit;width: 49.35%;">
<div class="row" ><img title="2.jpeg" src="https://i.postimg.cc/Xv5YsYv7/2.jpg" sizes="100vw" width="100%">
</div>
</div>
<div class="column" style="float: left;overflow: hidden;background-color: inherit;width: 50.65%;">
<div class="row" style=" "><img title="1.jpg" src="https://i.postimg.cc/B6cQG7Dr/1.jpg" sizes="100vw" width="100%"> </div>
</div>
</div>
</div>
<div style="width:60%; display: flex; margin-left: auto; margin-right: auto;">
<div id="outterrow" style="width:100%; float:left; display: flex;">
<div class="column" style="float: left;overflow: hidden;background-color: inherit;width: 100%;">
<div class="row" style=" "><img title="3.jpg" src="https://i.postimg.cc/ZnbYYPxC/3.jpg" sizes="100vw" width="100%"> </div>
</div>
</div>
</div>
<div style="width:60%; display: flex; margin-left: auto; margin-right: auto;">
<div id="outterrow" style="width:100%; float:left; display: flex; ">
<div class="column" style="float: left;overflow: hidden;background-color: inherit;width: 43.55%;">
<div class="row"><img title="5.jpg" src="https://i.postimg.cc/bwsJ2Tcn/5.jpg" sizes="100vw" width="100%"> </div>
</div>
<div class="column" style="float: left;overflow: hidden;background-color: inherit;width: 56.45%;">
<div class="row" style=" "><img title="4.jpg" src="https://i.postimg.cc/XJ07m6ZK/4.jpg" sizes="100vw" width="100%"> </div>
</div>
</div>
</div>
</div>
Опять же, в этих условиях «решения» не существует, только хаки с недостатками.
* Чтобы быть честными с браузерами, они делаютнастолько хорошая обработка пикселей, что большинство разработчиков даже не осознают, что это проблема.