1

Здравствуйте! Есть такой код. Высота у всех изображений одинаковая (400px для первого ряда и 300px для второго). Проблема в том, что второе изображение меньше первого на несколько пикселей. Со вторым рядом все в порядке. В ксс ничего не написано. Что может быть не так?

<section class="container">
    <div class="row">
        <div class="col-md-8">
            <img class="img-responsive" src="img/800x400/01.jpg" alt="Portfolio Image">
        </div>
        <div class="col-md-4">
            <img class="img-responsive" src="img/397x400/01.jpg" alt="Portfolio Image">
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <img class="img-responsive" src="img/397x300/01.jpg" alt="Portfolio Image">
        </div>
        <div class="col-md-4">
            <img class="img-responsive" src="img/397x300/02.jpg" alt="Portfolio Image">
        </div>
        <div class="col-md-4">
            <img class="img-responsive" src="img/397x300/03.jpg" alt="Portfolio Image">
        </div>
    </div>
</section>

1 ответ 1

1

По тому, что вы дали в вопросе, сложно воспроизвести, что именно у вас не так. Пример не воспроизводим. Могу предположить, что вместо .img-responsive вам нужно использовать .img-fluid. Вот воспроизводимый пример:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<section class="container">
    <div class="row">
        <div class="col-md-8">
            <img class="img-fluid" src="https://artchive.ru/res/media/img/ox800/work/687/256525.jpg" alt="Portfolio Image">
        </div>
        <div class="col-md-4">
            <img class="img-fluid" src="http://ifs.cook-time.com/preview/img371/371760.jpg" alt="Portfolio Image">
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <img class="img-fluid" src="http://иллюстраторы.рф/sites/default/files/illustrations/user14856/dpp_0012k.jpg" alt="Portfolio Image">
        </div>
        <div class="col-md-4">
            <img class="img-fluid" src="http://litcult.ru/u/dd/prose/26184/md_foto.jpg" alt="Portfolio Image">
        </div>
        <div class="col-md-4">
            <img class="img-fluid" src="http://lipetskinfo.ru/photo/theme/077/805/main.jpg" alt="Portfolio Image">
        </div>
    </div>
</section>

Возможно вы не знаете принципов адаптивной верстки. Да, у вас изначально изображения одинаковой высоты, но бустрап резиновый, и они пропорционально уменьшаются относительно колонки в которую вы поставите изображение. Колонки в первой строке разной ширины, у изображений пропорции разные, и они не будут уменьшаться одинаково. С помощью img такого не получится, как вариант, можете сделать вот так:

.img-1{
  height:400px;
  background-size:cover;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<section class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="img-1" style="background-image:url(https://artchive.ru/res/media/img/ox800/work/687/256525.jpg)"></div>
        </div>
        <div class="col-md-4">
        <div class="img-1" style="background-image:url(http://ifs.cook-time.com/preview/img371/371760.jpg)"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <img class="img-fluid img-1" src="http://иллюстраторы.рф/sites/default/files/illustrations/user14856/dpp_0012k.jpg" alt="Portfolio Image">
        </div>
        <div class="col-md-4">
            <img class="img-fluid" src="http://litcult.ru/u/dd/prose/26184/md_foto.jpg" alt="Portfolio Image">
        </div>
        <div class="col-md-4">
            <img class="img-fluid" src="http://lipetskinfo.ru/photo/theme/077/805/main.jpg" alt="Portfolio Image">
        </div>
    </div>
</section>

3
  • Спасибо большое. вопрос к вашему коду, а именно к этой части <div class="row"> <div class="col-md-8"> <div class="img-1" style="background-image:url(artchive.ru/res/media/img/ox800/work/687/…> </div> <div class="col-md-4"> <div class="img-1" style="background-image:url(ifs.cook-time.com/preview/img371/371760.jpg)"></div> </div> </div> Почему Вы загрузили изображения через background? Влияет это на что-то или просто Вам так было удобнее? Не знаю как нормально записать код в комментарии =/
    – Andy Krish
    27 ноя 2017 в 21:19
  • 1
    Через background загрузила именно потому, что вам нужно кадрировать изображение, для img с такими же свойствами есть object-fit, но он пока работает не везде.
    – kizoso
    28 ноя 2017 в 8:33
  • 1
    Большое спасибо!
    – Andy Krish
    28 ноя 2017 в 21:45

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.