галерея изображений с bootstrap

Question

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

Я стараюсь это так:

<div id="tabs-2"> 


    <link href="~/Content/ShowMoreImages.css" rel="stylesheet" /> 

    <ul class="row"> 
     @foreach (var item in Model.LolaBikePhotos) 
     { 

      @model ContosoUniversity.Models.UserProfile 
      <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"><img src="/Images/profile/@item.ImagePath" alt="" height=150 width=200 /></li> 
     } 
    </ul> 


</div> 

Но если сделать экран меньше изображения закладывают друг над другом.

Как сделать это отзывчивым?

Спасибо

Если я делаю это так:

<div id="tabs-2"> 


    <link href="~/Content/ShowMoreImages.css" rel="stylesheet" /> 
    <div class="container"> 

    @foreach (var item in Model.LolaBikePhotos) 
    { 

     @model ContosoUniversity.Models.UserProfile 
       <ul class="row"> 
     <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"><img src="/Images/profile/@item.ImagePath" alt="" /></li> 
    </ul> 
    } 

    </div> 

</div> 

то все изображения друг под другом, а не в ряд.

и это мой CSS:

ul {   
      padding:0 0 0 0; 
      margin:0 0 0 0; 
     } 
     ul li {  
      list-style:none; 
      margin-bottom:25px;   
     } 
     ul li img { 
      cursor: pointer; 
     } 

см Изображение

Видимо, это делает работу:

Спасибо всем за anwares

Answer 1

Установите эту библиотеку LINK

Тогда это сделать при условии, что ваш код извлечения изображений без ошибок это будет работать:

<div class="container" id="tabs-2"> 
    <link href="~/Content/ShowMoreImages.css" rel="stylesheet" /> 
    <div class="row"> 
     @foreach (var item in Model.LolaBikePhotos){ 

      @model ContosoUniversity.Models.UserProfile 
      <div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
       <a class="thumbnail" href="#"> 
        <img class="img-responsive" src="/Images/profile/@item.ImagePath" alt="" /> 
       </a> 
      </div> 
     } 
    </div> 
</div> 

На вашем CSS добавить:

.thumb{ 
    margin-top: 10px; //or whatever value you want. 
} 

Просто убедитесь, что вы поместили это после библиотечного CSS, чтобы он работал.

Answer 2

Так как вы используете бутстрап, удалите height и width с вашего тега <img> и добавьте 'class= "img-responsive">. Ваши изображения будут изменяться в соответствии с шириной столбца. Подробности здесь: http://getbootstrap.com/css/#images

Answer 3

Отзывчивость работает намного лучше в макете жидкости. Чтобы это произошло, укажите высоту и ширину в%, чтобы она автоматически настраивалась в соответствии с шириной и высотой экрана (родителя). Для вашего примера просто удалите атрибут ширины и высоты img и добавьте класс img-responsive, и bootstrap позаботится об этом.

Без бутстрапа:
В общем, укажите ширину контейнера в% и ширину и высоту изображения в соответствии с родительским. Как

<li class="imageContainer"> 
    <img class="imageStyle"></img> 
</li> 

CSS:

.imageContainer{ 
    width:50%; 
} 
.imageStyle{ 
    max-width:100%; 
} 

использование медиа запросы для различной ориентации устройства.