Как выровнять изображения внутри миниатюры рядом?

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

Я использовал контейнер, два помещал все содержимое внутрь, и каждое из изображений находилось внутри миниатюры.

Я также добавил эффект увеличения при прокрутке, при котором при наведении курсора на каждое изображение оно будет увеличиваться и перекрывать любое другое изображение.

Но у меня проблемы с размещением изображений рядом. Вот скриншот ниже

Как выровнять изображения внутри миниатюры рядом?

Кроме того, если я попробую другой набор изображений, я получу правильное выравнивание, но при наведении курсора на изображения он не работает.

Как выровнять изображения внутри миниатюры рядом?

Но это не помогает. Я не вижу, чтобы изображение становилось больше при любом значении размера, которое я поставил.

Во-вторых, мне нужно согласованное выравнивание любого количества изображений. Я поставил там, где всегда будет два изображения в строке, и при наведении курсора на любое изображение не нарушается выравнивание других изображений. Добавление приведенного ниже кода помогает увеличить масштаб при наведении, но иногда это меняет положение других изображений.

img:hover {
    -webkit-transform:scale(1.5); /* Safari and Chrome */
    -moz-transform:scale(1.5); /* Firefox */
    -ms-transform:scale(1.5); /* IE 9 */
    -o-transform:scale(1.5); /* Opera */
     transform:scale(1.5);
     z-index: 1;
     position: relative;

Я использую бутстрап для выравнивания, чтобы выравнивание было одинаковым для экрана любого размера.

Как я могу заставить это работать?

Вот фрагмент HTML / CSS

div {
    margin-top: 30px;
}

.container .row img {
    width: 100%;
    height: auto;
}

img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;

    /*object-fit:scale-down;*/
    /*object-fit: contain;*/
}

img:hover {
    -webkit-transform:scale(1.5); /* Safari and Chrome */
    -moz-transform:scale(1.5); /* Firefox */
    -ms-transform:scale(1.5); /* IE 9 */
    -o-transform:scale(1.5); /* Opera */
     transform:scale(1.5);
     z-index: 1;
     position: relative;
     background:rgba(0,0,0,0.05);
     border: 1px solid black;
     opacity: 1;
}
.img{
   width:100px;
   height:100px;
}

<html>
<head>
    <title>Summary</title>
    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <meta name = "viewport" content = "width=device-width, initial-scale=1">
    <link rel = "stylesheet" type = "text/css" href = "link.css"
</head>

<body>

    <div class = "container">
        <div class = "row">
            <div class = "col-lg-6 col-md-6 col-sm-6 col-xs-6 style">
                <div class = "thumbnail">
                    <img src = "https://demo.utorlabs.com/static/jsw/balance1543844865.53.svg">
                </div>
            </div>
            <div class = "col-lg-6 col-md-6 col-sm-6 col-xs-6 style">
                <div class = "thumbnail">
                    <img src = "https://demo.utorlabs.com/static/jsw/balance1543832720.7.svg">
                </div>
            </div>
            <div class = "col-lg-6 col-md-6 col-sm-6 col-xs-6 style">
                <div class = "thumbnail">
                    <img src = "https://demo.utorlabs.com/static/jsw/balance1543833670.32.svg">
                </div>
            </div>
            <div class = "col-lg-6 col-md-6 col-sm-6 col-xs-6 style">
                <div class = "thumbnail">
                    <img src = "https://demo.utorlabs.com/static/jsw/latency1543855760.2.svg">
                </div>
            </div>
        </div>
    </div>

    <script src = "https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity = "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin = "anonymous"></script>
</body>
</html>

Вы используете Bootstrap 3, который использует float для столбцов. Это имеет некоторые проблемы. Переключитесь на Bootstrap 4, и ваша проблема может быть решена

— 04.12.2018 09:02

html css twitter-bootstrap-3 alignment

04.12.2018 08:54

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

197

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Я взял ваш код и просто изменил версию Bootstrap с 3.3.7 на текущую 4.1.3 и… вуаля!

div {
    margin-top: 30px;
}

.container .row img {
    width: 100%;
    height: auto;
}

img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;

    /*object-fit:scale-down;*/
    /*object-fit: contain;*/
}

img:hover {
    -webkit-transform:scale(1.5); /* Safari and Chrome */
    -moz-transform:scale(1.5); /* Firefox */
    -ms-transform:scale(1.5); /* IE 9 */
    -o-transform:scale(1.5); /* Opera */
     transform:scale(1.5);
     z-index: 1;
     position: relative;
     background:rgba(0,0,0,0.05);
     border: 1px solid black;
     opacity: 1;
}

<script src = "https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel = "stylesheet"/>

<div class = "container">
  <div class = "row">
    <div class = "col-lg-6 col-md-6 col-sm-6 col-xs-6 style">
      <div class = "thumbnail">
        <img src = "https://demo.utorlabs.com/static/jsw/balance1543844865.53.svg">
      </div>
    </div>
    <div class = "col-lg-6 col-md-6 col-sm-6 col-xs-6 style">
      <div class = "thumbnail">
        <img src = "https://demo.utorlabs.com/static/jsw/balance1543832720.7.svg">
      </div>
    </div>
    <div class = "col-lg-6 col-md-6 col-sm-6 col-xs-6 style">
      <div class = "thumbnail">
        <img src = "https://demo.utorlabs.com/static/jsw/balance1543833670.32.svg">
      </div>
    </div>
    <div class = "col-lg-6 col-md-6 col-sm-6 col-xs-6 style">
      <div class = "thumbnail">
        <img src = "https://demo.utorlabs.com/static/jsw/latency1543855760.2.svg">
      </div>
    </div>
  </div>
</div>

Bootstrap 4 это так!

— 04.12.2018 13:08

04.12.2018 09:07

Поскольку Bootstrap представляет собой сетку из 12 столбцов, вам необходимо установить два изображения в классах шириной col-6 * для выравнивания двух изображений. И укажите "overflow: hidden" для .row, так как он не ломается при наведении курсора. Я добавил скрипку для вашей справки. jsfiddle

.row{
   overflow: hidden;
}

04.12.2018 09:19

ты можешь использовать

.style:nth-child(2n+1) {
    clear: both;
}

div {
    margin-top: 30px;
}

.container .row img {
    width: 100%;
    height: auto;
}

img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;

    /*object-fit:scale-down;*/
    /*object-fit: contain;*/
}

img:hover {
    -webkit-transform:scale(1.5); /* Safari and Chrome */
    -moz-transform:scale(1.5); /* Firefox */
    -ms-transform:scale(1.5); /* IE 9 */
    -o-transform:scale(1.5); /* Opera */
     transform:scale(1.5);
     z-index: 1;
     position: relative;
     background:rgba(0,0,0,0.05);
     border: 1px solid black;
     opacity: 1;
}

.style:nth-child(2n+1) {
    clear: both;
}

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class = "container">
  <div class = "row">
    <div class = "col-lg-6 col-md-6 col-sm-6 col-xs-6 style">
      <div class = "thumbnail">
        <img src = "https://demo.utorlabs.com/static/jsw/balance1543844865.53.svg">
      </div>
    </div>
    <div class = "col-lg-6 col-md-6 col-sm-6 col-xs-6 style">
      <div class = "thumbnail">
        <img src = "https://demo.utorlabs.com/static/jsw/balance1543832720.7.svg">
      </div>
    </div>
    <div class = "col-lg-6 col-md-6 col-sm-6 col-xs-6 style">
      <div class = "thumbnail">
        <img src = "https://demo.utorlabs.com/static/jsw/balance1543833670.32.svg">
      </div>
    </div>
    <div class = "col-lg-6 col-md-6 col-sm-6 col-xs-6 style">
      <div class = "thumbnail">
        <img src = "https://demo.utorlabs.com/static/jsw/latency1543855760.2.svg">
      </div>
    </div>
  </div>
</div>

04.12.2018 09:22

Другие вопросы по теме

Как сделать все таблицы адаптивными в DIV

Как сохранить активную ссылку на боковой панели, когда я меняю вкладки с помощью angular2

{display: none} не работает с флажком?

Проблема: div с шириной: авто только автоматически расширяется до определенной точки

Динамически изменять только определенный размер шрифта в приложении

Как повернуть гистограмму на 180 градусов в Dash?

Элементы, отображаемые поверх предварительного просмотра PDF-файла с использованием элемента <object>, не являются интерактивными в Chrome

Firefox - открытие контекстного меню вызывает событие прокрутки

Целевой псевдоэлемент первого дочернего элемента

Простой 5-звездочный, но хочется оперативно реагировать

Как выровнять изображения внутри миниатюры рядом?

Ответы 3

Другие вопросы по теме

Похожие вопросы