Bootstrap - Изображения растягивается в ширину DIV

Question

У меня есть сетка изменения размеров изображения (оригинальные изображения больше, чем то, что будет соответствовать на установке сетки с использованием Bootstrap

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

Любая помощь?

HTML:

<div class="container"> 
    <div class="row"> 
    <div class="col-md-12 group"> 
     <h4>Unsorted Pictures</h4> 
     <div class="row"> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
</div> 
</div> 
</div> 
</div> 

CSS:

.rectangle { 
    border: 1px solid black; 
} 

.group { 
    border: 1px solid black; 
    height: 300px; 
    overflow: scroll; 

    text-align: center; 
} 

.unsorted { 
    height: 190px; 
} 

.image { 
    min-width: 100%; 
    max-width: 100%; 
    height: auto; 
} 

Контейнер имеет максимальную ширину в 1024px.

Answer 1

В вашем классе .image задана динамическая ширина, основанная на процентах. Он всегда будет меняться в зависимости от его контейнера.

У вас есть пара вариантов.

1. Удалить min-width: 100%; Это устанавливает изображение в размере его контейнера.

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

Answer 2

Удалить объявление минимальной ширины из класса .image.

.image { 
    /* min-width: 100%; REMOVE THIS */ 
    max-width: 100%; 
    height: auto; 
} 

Вот ваша разметка с моим решением в Bootply. Похоже, он работает нормально.

http://www.bootply.com/rx9NWTMq9f