Отзывчивая схема сетки с фоновым изображением

Я хочу сделать сетку с изображениями в качестве фона. Мне нужна 2 колонки и 2 строки, но с разной высотой и шириной. Он должен реагировать, и когда мы изменяем размер окна или экрана, сетка и изображения должны пропорционально изменять размер. Как я могу это сделать? Пожалуйста, помогите мне. Вот мой код.Отзывчивая схема сетки с фоновым изображением

#ser_wrap{ 
 
\t margin: auto; 
 
\t border: 1px solid #fff; 
 
\t padding: 0; 
 
} 
 

 
#col1{ 
 
\t background: url(images/col1.jpg) no-repeat 50% 0 #CC8F1D; 
 
\t background-size: 100%; 
 
    background-size: cover; 
 
\t -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
\t height: 100%; 
 
\t min-height: 35vh; 
 
\t padding: 0; 
 
} 
 

 
#col2{ 
 
\t background: url(images/col2.jpg) no-repeat 50% 0 #BA7677; 
 
\t background-size: 100%; 
 
    background-size: cover; 
 
\t -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
\t height: 100%; 
 
\t min-height: 45vh; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="ser_wrap" class="col-lg-12"> 
 
    \t <div id="col1" class="col-md-5 col-lg-5"> 
 
     \t 
 
     </div> 
 
     <div id="col2" class="col-md-7 col-lg-7"> 
 
     </div> 
 
    </div>

источник

2015-08-20 Aruna Jithin

у вас есть попытка на код Thats не работает? – BobbyTables

@zedd .. Я добавил свой код сейчас. –

и каково нежелательное поведение с кодом, который вы опубликовали? – BobbyTables

Я полагаю, вы ожидаете, что результат выглядит следующим образом:

#ser_wrap{ 
 
\t margin: auto; 
 
\t border: 1px solid #fff; 
 
\t padding: 0; 
 
} 
 

 
#col1{ 
 
\t background: url(http://www.sonoravirtual.com/images/events/big/304946bde31e3ad3853a70a02b97e1d4.jpg) no-repeat 50% 0 #CC8F1D; 
 
\t background-size: 100%; 
 
    background-size: cover; 
 
\t -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
\t height: 100%; 
 
\t min-height: 35vh; 
 
\t padding: 0; 
 
} 
 

 
#col2{ 
 
\t background: url(http://www.sonoravirtual.com/images/events/big/304946bde31e3ad3853a70a02b97e1d4.jpg) no-repeat 50% 0 #BA7677; 
 
\t background-size: 100%; 
 
    background-size: cover; 
 
\t -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
\t height: 100%; 
 
\t min-height: 45vh; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="ser_wrap" class="col-lg-12"> 
 
    \t <div id="col1" class="col-md-5 col-lg-5"> 
 
     <!-- <img src="http://www.sonoravirtual.com/images/events/big/304946bde31e3ad3853a70a02b97e1d4.jpg" class="img-responsive"> \t --> 
 
     </div> 
 
     <div id="col2" class="col-md-7 col-lg-7"> 
 
     <!-- <img src="http://www.sonoravirtual.com/images/events/big/304946bde31e3ad3853a70a02b97e1d4.jpg" class="img-responsive"> --> 
 
     </div> 
 
    </div>

Используйте класс "IMG-resposive" включен в начальной загрузки базы в " img ".

источник

2015-08-20 08:34:21

Благодарим вас за помощь. Хорошо ли использовать img-тег вместо фонового изображения? Как я могу заполнить контейнер изображением при использовании тега img? –

Обновить код: Комментарии к тегам "img", чтобы отключить и изменить CSS, чтобы изображения отображались как фон в div. Я предлагаю вам использовать тег «img». Если вы используете изображения разных высот в качестве фона, вам нужно назначить фиксированные высоты контейнеру div. В противном случае высота пропорциональна размеру изображения (с использованием тега «img»). –

Большое вам спасибо. Идеально –

Не уверен, что это то, что вы ищете, но дилемму с двумя столбцами/2 строк можно решить, используя таблицу/tr/td. Фон для них может быть легко изменен, если вам нужны изображения, поместив их в тег фона в CSS, который вы уже сделали. Вот быстрый JSfiddle, чтобы показать, что я имею в виду. Я понимаю, что это не самое элегантное решение, но это быстро :)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<div id="ser_wrap" class="col-lg-12"> 
    <table cellpadding=4> 
     <tr colspan = 2> 
      <td id="col1"></td> 
      <td id = "col3"></td>   
     </tr> 
     <tr colspan = 2> 
      <td id="col2"></td> 
      <td id = "col4"></td> 
     </tr> 
    </table> 
</div>

, а затем CSS

#ser_wrap{ 
    margin: auto; 
    border: 1px solid #fff; 
    padding: 0; 

} 

#col1{ 
    background: url(images/col1.jpg) no-repeat 50% 0 #CC8F1D; 
    background-size: 50%; 
    background-size: cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    width: 200px; 
    height:200px; 
    min-height: 35vh; 
    padding: 0; 

} 

#col2{ 
    background: url(images/col2.jpg) no-repeat 50% 0 #BA7677; 
    background-size: 50%; 
    background-size: cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    width: 200px; 
    height:200px; 
    min-height: 45vh; 
} 

#col3{ 
    background: black; 
    background-size: 50%; 
    background-size: cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    width:200px; 
    height:200px; 
    min-height: 45vh; 
} 

#col4{ 
    background: red; 
    background-size: 50%; 
    background-size: cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    width: 200px; 
    height:200px; 
    min-height: 45vh; 
}

https://jsfiddle.net/wwgco40v/2/

источник

2015-08-20 08:49:04

Отзывчивая схема сетки с фоновым изображением

ответ

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