Как я могу добавить левое поле для изображения, только если оно отображается в отдельной строке (маленькие экраны) с использованием Bootstrap 4.0?

Question

У меня есть следующий код, чтобы показать 2 изображения рядом друг с другом: -

<img style="padding-left:25%;margin-top:15px;margin-right:20%" src="~/img/1.png" /><img  style="margin-top:15px" src="~/img/2.png" />

следующим образом: -

но на экранах меньшего размера 2 изображения будут отображаться друг под другом (это нормально), но они не будут выровнены по вертикали следующим образом: -

так как я могу это исправить? другими словами, как я могу добавить левое поле для второго изображения, только если оно отображается в отдельной строке?

Answer 1

Вы также можете попробовать использовать свойство display с медиа-запросом.

<div class="display">
 <img style="margin-right: 20px;" src="~/img/1.png" />
 <img src="~/img/2.png" />
</div>

.display {
  display: flex;
}
@media(min-width: 320px) and (max-width: 767px) {
 .display {
   display: block;
 }
}

Answer 2

Вам нужно будет использовать медиа-запросы:

img {
    margin-top:15px;
}
@media screen and (min-width: 768px) {
    img {
        padding-left:25%;
        margin-right:20%;
    }
}

Это 768 пикселей произвольно, вы можете изменить его на нужное вам значение. Вместо min-width можно использовать min-resolution.

Answer 3

Вы можете сделать это с помощью javascript. Слушайте каждый раз при изменении размера окна и вычисляйте, является ли сумма ширины всех изображений больше, чем ширина окна, и добавляйте поля / отступы в соответствии с ситуацией

window.addEventListener('resize', function(event){ //listen to window resize
  let img1w = document.getElementById('image1').offsetWidth;
  let img2w = document.getElementById('image2').offsetWidth;
  if (img1w + img2w > window.innerWidth) {
    document.getElementById('img1w').style.marginLeft = '200px' //just a placeholder. do what you want here
  }
});

Вы также можете использовать bootstrap медиа-запросы, но количество точек останова ограничено. Итак, вам нужно создать свой собственный медиа-запрос