Блог

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

В настоящее время я использую тег фонового изображения, но я хотел бы изменить его на тег изображения, который выглядит следующим образом:

 <div class="col-lg-8 col-lg-push-2 overlay">
        <div class="container-fluid image-library">
            <div class="col-lg-4 image-container" style="background-image: url('media/placeholder/1.jpg');"></div>
            <div class="col-lg-4 image-container" style="background-image: url('media/placeholder/2.jpg');"></div>
            <div class="col-lg-4 image-container" style="background-image: url('media/placeholder/3.jpg');"></div>
        </div>
    </div>
  

И CSS:

     .image-container{
    height: 200px; 
    max-width:300px;
    outline: #FFFFFF solid; 
    background-position: center center; 
    background-size: cover;
    margin-left:auto;
    margin-right:auto;        
}
  

После этого я хотел бы, чтобы столбец начальной загрузки располагался по центру, но, похоже, я не могу заставить это работать.

Любая помощь была бы высоко оценена!

Приветствую,

Bram

Вы пытались добавить

 background-size:100%;
or
background-size:auto;
  

к вашему классу .image-container?

Я использую img тег, так как вы хотели перейти на него.

ДЕМОНСТРАЦИЯ

HTML — КОД

 <div class="col-lg-8 col-lg-push-2 overlay">
    <div class="container-fluid image-library">
        <div class="col-lg-4 image-container" ><img src="http://logonoid.com/images/stack-overflow-logo.png"></div>
        <div class="col-lg-4 image-container" ><img src="http://logonoid.com/images/stack-overflow-logo.png"></div>
        <div class="col-lg-4 image-container"><img src="http://logonoid.com/images/stack-overflow-logo.png"></div>
    </div>
</div>
  

КОД CSS

 .image-container{
    height: 200px; 
    max-width:300px;
    outline: #FFFFFF solid; 
    background: red;
    margin-left:auto;
    margin-right:auto;        
}

.image-container img{
    width: 100%;
    position: relative;
}