Как я могу получить эти изображения размером 365 пикселей на 365 пикселей максимум. Использование максимальной ширины не помогло

Question

Я хочу, чтобы максимальная ширина была 365 пикселей в полноэкранном режиме, а затем больше на экране мобильного устройства, чтобы они были отзывчивыми. Контейнер реагирует, поэтому он должен покрывать эту часть. Единственная проблема заключается в том, что в данный момент я не могу использовать для изображений ни подгонку объекта, ни максимальную ширину. Это означает, что изображения в приведенной ниже таблице перекрывают друг друга и имеют исходную ширину / высоту (около 600 пикселей).

Кто-нибудь может посоветовать, где я ошибаюсь?

HTML КОД:

<?php foreach ($portfolio as $project){ ?>
        <div class="gallery_product col-lg-4 col-md-4 col-sm-6 col-xs-12 <?php

        //turn technologies into an array to loop through 
        $string = $project->technologies; 
        preg_replace(' ','',$string);
        $array = explode(',',$string);
        $filter = "";
        foreach($array as $filter){
            echo "filter " . $filter . " ";
        } 
        ?>">
            <img src="<?php echo $project->image1 ?>" alt="<?php echo $project->title ?>" class="img-responsive img-gallery border border-info">
            <div class="middle-gallery">
                <div class="text-gallery">
                <p class="uppercase"><?php echo strtoupper( $project->technologies ) ?></p>
                 <a href="?controller=portfolio&action=read&projectID=<?php echo $project->projectID; ?>" ><span class="button showmore">Find out more!</span> </a>
                </div> 
            </div>
        </div>

СТИЛЬ:

  .gallery_product
{
    margin-bottom: 30px;
    position: relative;


}
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;

}

.img-gallery {

  opacity: 1;
  transition: .5s ease;
  backface-visibility: hidden;

}

.middle-gallery {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.gallery_product:hover .img-gallery {
  opacity: 0.2;
}

.gallery_product:hover .middle-gallery {
  opacity: 1;
}

.text-gallery {

  color: black;
  font-size: 16px;
  padding: 16px 32px;
}