Bootstrap - Images being stretched to width of div

I have a grid of resized images (the original images are bigger than what would fit on the grid setup using Bootstrap.

I'm running into a problem where if I decrease the width of my window, instead of remaining the same resized size and responding to the smaller width, each image is being stretched (larger than its original size) to fit the width of the div.

Any help?

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;
}

Container has a max-width of 1024px.