Масштабирующиеся изображения

@fidel42rus · Регистрация: 24.10.2015

Author24 — интернет-сервис помощи студентам

Всем привет) с версткой плохо) использую бутстрап 4)
не кидайте тапком, подскажите)

хочу сделать чтобы на странице выводилось 10 изображений таблицей в 2 столбца, 5 рядов ну типа 1 до второе после и так 5 рядов.
так вот)
использую такую конструкцию

HTML5

<div class="col-sm-6 col-sm-push-6">
  <img src="640x360.png" alt="Image 1" class="img-thumbnail">
    <img src="640x360.png" alt="Image 1" class="img-thumbnail">
    <img src="640x360.png" alt="Image 1" class="img-thumbnail">
    <img src="640x360.png" alt="Image 1" class="img-thumbnail">
    <img src="640x360.png" alt="Image 1" class="img-thumbnail">
</div>
<div class="col-sm-6 col-sm-push-6">
  <img src="640x360.png" alt="Image 1" class="img-thumbnail">
    <img src="640x360.png" alt="Image 1" class="img-thumbnail">
    <img src="640x360.png" alt="Image 1" class="img-thumbnail">
    <img src="640x360.png" alt="Image 1" class="img-thumbnail">
    <img src="640x360.png" alt="Image 1" class="img-thumbnail">
</div>

на компе все отлично, но на телефоне они сьезжают друг под друга.
Подскажите как можно сделать чтобы они оставались на своих местах, пусть уменьшались но были таблицей в 2 столбца
Очень прошу помощи

@DanLo · 05.02.2021, 01:55

CSS

1
2
3

img {
    max-width: 50%;
}

или

CSS

1
2
3

img {
    max-width: calc(50% - {x}px/rem/%);
}

где x это значение padding/margin картинки * 2, или использовать padding и border-box

@fidel42rus · 05.02.2021, 08:03 **[ТС]**

то что нужно) спасибо.

@fidel42rus 39 / 41 / 15 Регистрация: 24.10.2015 Сообщений: 598
	05.02.2021, 08:03 [ТС]	3
	то что нужно) спасибо. 0

Масштабирующиеся изображения

Решение