it-swarm.com.ru

Twitter Bootstrap Адаптивное фоновое изображение внутри Div

Как я могу изменить изображение #bg, чтобы оно было адаптивным, изменяемого размера и пропорциональным во всех браузерах?

HTML:

 <div class="container">
       <div class="row">
          <div class="col-md-2"></div>

            <div class="col-md-8 col-sm-6 col-xs-12 well" id="bg">

               </div>

            <div class="col-md-2"></div>
       </div>
  </div>

cSS:

@import url('bootstrap.min.css');

body{
    background: url('../img/bg.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top: 12%;    
}

#bg{
    background:url('../img/con_bg4.png') no-repeat center center;
    height: 500px;
}
59
vkatsitadze

Я нашел решение.

background-size:100% auto;
78
vkatsitadze

Вы также можете попробовать:

background-size: cover;

Есть несколько хороших статей для чтения об использовании этого свойства CSS3: P неправильное фоновое изображение полной страницы от CSS-Tricks и CSS Background-Size от David Walsh .

ОБРАТИТЕ ВНИМАНИЕ - Это не будет работать с IE8-. Тем не менее, он будет работать на большинстве версий Chrome, Firefox и Safari.

24
doodelicious

Попробуйте это (примените к классу, в котором находится ваше изображение (не к img), например.

.myimage {
  background: transparent url("yourimage.png") no-repeat top center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100%;
  height: 500px;
}
7
Jowita Emberton

Я считаю, что это тоже должно делать эту работу:

background-size: contain;

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

6
KevinAdu

У меня была похожая проблема, и я решил ее, используя:

background:url(images/banner1.png) no-repeat center top scroll;
background-size: 100% auto;
padding-bottom: 50%;

... здесь я должен был добавить padding: 50%, потому что иначе у меня не получилось. Это позволило мне установить высоту контейнера в соответствии с размером изображения моего баннера . и это также отзывчиво в моем случае.

6
Mashhood

Это должно работать

background: url("youimage.png") no-repeat center center fixed;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
 background-size: 100% auto;
1
Jay

Способ сделать это с помощью background-size, так что в вашем случае:

background-size: 50% 50%;

или же

Вы можете установить ширину и высоту элементов в процентах, а также

1
Hive7

Не используйте исправлено:

.myimage {
   background:url(admin-user-bg.png) no-repeat top center;
   background: transparent url("yourimage.png") no-repeat top center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: 100%;
   height: 500px;
}
1
RayKech

Mby bootstrap img-responsive класс, который вы ищете.

1
Dzintars