CSS Bootstrap - Как сделать изображения одинаковыми по размеру при сохранении плавности? - PullRequest
Новая
       41

CSS Bootstrap - Как сделать изображения одинаковыми по размеру при сохранении плавности?

0 голосов
/ 03 октября 2018

У меня есть одна строка из 5 изображений и две строки из 4 изображений, как показано ниже:

enter image description here

Проблема заключается в том, что я использую col-mdв макете изображения в первом ряду становятся меньше по сравнению с последними двумя рядами, так как это было сделано при начальной загрузке.Как мне сделать изображения одинакового размера и при этом сохранить отзывчивость?

Вот мой текущий код: 

<div class="row">
    <div class="col-md-2">
        <img src="https://drive.google.com/uc?export=download&id=1nTQDh-F35LayxXtm6WMZK6U6eYmwdrzj" class="img-fluid"">
    </div>
    <div class="col-md-2 col-half-offset">
        <img src="https://drive.google.com/uc?export=download&id=1YNxNg4k2RdZ1zmm-VjiljEU6JpKc1s5q" class="img-fluid"">
    </div>
    <div class="col-md-2 col-half-offset">
        <img src="https://drive.google.com/uc?export=download&id=1RnX-U-YyU5kP2xbe7zWE9oJcU78PgMCW" class="img-fluid"">
    </div>
    <div class="col-md-2 col-half-offset">
        <img src="https://drive.google.com/uc?export=download&id=1GMKk5IW_iI55gqE6ye0Ul4nmssrIfX19" class="img-fluid"">
    </div>
    <div class="col-md-2 col-half-offset">
        <img src="https://drive.google.com/uc?export=download&id=144ezEQEDozijf8Vk3dB8QYgoqtCfEWuG" class="img-fluid"">
    </div>
</div>

<div class="row">
    <div class="col-md-3">
        <img src="https://drive.google.com/uc?export=download&id=1F0XPaqsKV3G6JzI4SNaH5tlPSJXxkPXr" class="img-fluid"">
    </div>
    <div class="col-md-3">
        <img src="https://drive.google.com/uc?export=download&id=1MNQ7qgEjAxxKuif5pJqiB2b8zRirTs3H" class="img-fluid"">
    </div>
    <div class="col-md-3">
        <img src="https://drive.google.com/uc?export=download&id=1IN6UTqnfhX3vI1_AAIKafDEW7i_66EWg" class="img-fluid"">
    </div>
    <div class="col-md-3">
        <img src="https://drive.google.com/uc?export=download&id=1x91NNnHlE0PpZoAWh0ueMIkkgC-dSUMn" class="img-fluid"">
    </div>
</div>

<div class="row">
    <div class="col-md-3">
        <img src="https://drive.google.com/uc?export=download&id=106oTjYXJQBg-cPTL_FXW-HQwDk21gzkd" class="img-fluid"">
    </div>
    <div class="col-md-3">
        <img src="https://drive.google.com/uc?export=download&id=1FuqE9s-_nXO3Jw-RCJKnzPlBOujV_m5_" class="img-fluid"">
    </div>
    <div class="col-md-3">
        <img src="https://drive.google.com/uc?export=download&id=1mLywhfH8KMlEViBTQ-GjJrjC3dqWxvDc" class="img-fluid"">
    </div>
    <div class="col-md-3">
        <img src="https://drive.google.com/uc?export=download&id=1WO8eYFq8QlTfIxmfuWqFZNR8heDJE93I" class="img-fluid"">
    </div>
</div>

Для смещения половинной ширины: 

.col-half-offset{
    margin-left:4.166666667%
}
...