Как покрыть фоновые изображения в сетках Bootstrap 3?

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

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

Вот URL :

Вот мой код:

HTML:

<div class="container-fluid">
  <div class="row">      

    <div class="landing-col col-xs-12"></div>

  </div>

  <div class="row">

    <div class="first-col col-sm-4"></div>                      
    <div class="second-col col-sm-4"></div>           
    <div class="third-col col-sm-4"></div>

  </div>

</div>

CSS

.landing-col {
   background: url('../images/99.jpg') no-repeat;
   -webkit-background-size: 100% auto;
   -moz-background-size: 100% auto;
   -o-background-size: 100% auto;
    background-size: 100% auto;
    height: 500px; }

.first-col {
   background: url('../images/44.jpg') no-repeat;
   -webkit-background-size: 100% auto;
   -moz-background-size: 100% auto;
   -o-background-size: 100% auto;
    background-size: 100% auto;
    height: 300px;
}

.second-col {
background: url('../images/33.jpg') no-repeat;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
 background-size: 100% auto;
 height: 300px;
}

.third-col {
background: url('../images/22.jpg') no-repeat;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
 background-size: 100% auto;
 height: 300px;
}

Я пробовал использовать min-width и max-width со 100%, но они не работают для меня.

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

12 голосов | спросил markhorrocks 17 PM00000010000001231 2014, 13:35:12

4 ответа


0

Вы можете использовать элемент блока с фоновым изображением, где высота задается через padding-bottom с процентным значением

.img {
    margin-right: -15px; // Remove right gap
    margin-left: -15px;  // Remove left gap
    padding-bottom: 62.5%; // ratio is 16:10
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

Пример в Codepen

или с элементами img (в этом случае ваши изображения должны иметь одинаковые размеры)

Пример в Codepen

ответил Rakhat Jabagin 20 PM00000080000003731 2014, 20:50:37
0

Давайте попробуем это:

  1. Вводите "строки" в одну.
  2. Добавьте col-md-* в каждый столбец
  3. Уменьшите высоту landing-col до 300 пикселей

HTML

<div class="container-fluid">
    <div class="row">
        <div class="landing-col col-md-12 col-xs-12"></div>
        <div class="first-col col-md-4 col-sm-4"></div>
        <div class="second-col col-md-4 col-sm-4"></div>
        <div class="third-col col-md-4 col-sm-4"></div>
    </div>
</div>

CSS

.landing-col {
    background: url('http://sample.trainingdata.com.au/images/99.jpg') no-repeat;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
    height: 300px;
    margin:0;
    padding:0px;
}

Демонстрация здесь => http://fiddle.jshell.net/nobuts/7x0rpn5y/12/show/light/.

ответил Wilf 20 PM00000080000004231 2014, 20:33:42
0

Вы всегда можете добавить прозрачный заполнитель изображения внутри div для хранения контейнера, а затем установить автоматическую высоту для содержащего div 'col-xs-12'. Это все еще позволит вам использовать фоновое изображение с атрибутом cover, который будет заполнять область в более узких столбцах.

ответил Chris 20 PM00000080000000231 2014, 20:24:02
0

Вам действительно нужно использовать верхнее изображение в качестве фона для div? Попробуйте этот код вместо своего <div class="landing-col col-xs-12"></div>:

<div class="landing-col col-xs-12">
    <img src="images/99.jpg">
</div>

После этого все свойства, которые вам понадобятся:

.landing-col { padding: 0px; } // resets .col-xs-12 padding-right and padding-left

.landing-col img { width:100%; }
ответил Kamil 17 PM00000040000004731 2014, 16:27:47

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

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132