Изменение размера двух изображений в одной строке на Bootstrap 3

Я пытаюсь поместить два изображения в одну строку с помощью Bootstrap, используя два разных столбца. Я выровнял их, использовал некоторый цвет фона, два видят результат и т. Д.Изменение размера двух изображений в одной строке на Bootstrap 3

Но, когда я изменяю разрешение, чтобы увидеть отзывчивый эффект, они не изменяются на равные! изображения имеют одинаковую ширину, но да, ту же высоту. У кого-то есть догадка?

Вот HTML:

.coresq { 
 
    background-color: #131313; 
 
} 
 

 
.cordir { 
 
    background-color: #AAAAAA; 
 
} 
 

 
.top-shows { 
 
    margin-left: 0; 
 
    margin-right: 0; 
 
} 
 

 
.top-shows [class^="col-"] { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
}

<div class="container"> 
 
    <div class="row top-shows"> 
 
    <div class="col-xs-4 coresq "> 
 
     <img src="img/slogan_part_1.jpg" alt="imagem" class="slogan_l img-responsive"/> 
 
    </div> 
 
    <div class="col-xs-8 cordir"> 
 
     <img src="img/slogan_part_2.jpg" alt="imagem" class="slogan_r img-responsive"/> 
 
    </div> 
 
    </div> 
 
</div>

Когда дисплей уменьшает, ответные свойства не менять размеры в равной степени. Не должны ли? Разве они не на той же линии?

источник

2017-01-12 R. Junior

Каковы разрешения изображений? –

первый имеет 203 X 51 второй имеет 346X51 –

** Вы можете попробовать этот [пример] (http://stackoverflow.com/a/16774135/4210935) для разного размера изображений **; ') –

Одно изображение использует двойные колоссы (xs-8), чем другие (xs-4), поэтому при изменении размера меньшая колонка съедается.

Try resizing this external JSFIDDLE with equal cols

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

источник

2017-01-12 13:16:57 Syden

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

Отредактировано, извините .... –

Да, это так ... Последнее сомнение .... Поведение для изменения размера не должно выполняться строкой? Я думаю, как тег

, но, как я вижу, решетки управляются индивидуально ... Я прав? –

У вас есть два различных размеров столбцов. col-xs-4 и col-xs-8

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

источник

2017-01-12 13:24:55 Praminda

Tks pramind, но у изображений нет того же witdh .... Я сделаю их фотошоп .... –

После некоторого исследования я искал Flex, который может это сделать, и увидел новую версию бутстрапа (4, но все еще в альфе). Я много читал и решил проверить. Оно работает! Точно так, как я спросил раньше, с небольшими изменениями в коде.

Ну, пользовательские CSS то же самое, но Bootstrap является 4 (альфа, для тестирования) и HTML здесь:

<div class="container"> 
 

 

 
    <div class="d-flex flex-row"> 
 

 
     <div class="col-xs-4 coresq "> 
 
     <img src="img/slogan_part_1.jpg" alt="imagem" class="slogan_l img-fluid"/> 
 
     </div> 
 

 
     <div class="col-xs-8 cordir"> 
 
     <img src="img/slogan_part_2.jpg" alt="imagem" class="slogan_r img-fluid"/> 
 
     </div> 
 

 
    </div> 
 

 

 
    </div> 
 
.

PS: Я не знаю, почему, но код на фрагменте предварительного просмотра сокращает последний div, заканчивающий код. На финише есть одна точка.

источник

2017-01-13 22:17:10

Изменение размера двух изображений в одной строке на Bootstrap 3

ответ

Смежные вопросы