title: Images stuck on same size and refuse to resize
body: <p>I'm using a downloaded theme from a site and it had multiple versions of homepages. I'm using one of them but in the homepage there were set sizes for the images.</p>
  <p>I have a dynamic site so the images will be loaded automatically. I'm trying to get rid of this stuck image size but it refuses, a single image is taking all over the container.</p>
  <p>I've deleted all the code in that section. It was a container split into 3 parts, a side bar , middle part and right part. Because I won't know the sizes of my images I left the sidebar as is and I joined the middle and right part to be together. Now whenever I add an image it takes over the whole container and the other images just load under it which lead the container to drag more.</p>
  <p>This is what my code looks like</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
      display: grid;
      grid-template-columns: repeat(3,1fr);
      grid-auto-rows: 100px 300px;
      grid-gap: 10px;
  }
  
  .gallery_container .gallery_Item {
      width:100%; 
      height: 100%;
      position: relative; 
      
      }
  
  4.gallery_container .gallery_Item .image {
              width: 100%;
              height: 100%;
              overflow: hidden;
          }
  
    .gallery_container .gallery_Item .img {
          width:100%; 
          height: 100%;
          object-fit: cover;
          
          
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
          &lt;div class="gallery_container"&gt;
              &lt;div class="gallery_Item"&gt;
                  &lt;div class="imgInGallery"&gt;
                      &lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPNy2qphPH0eDMdpoyfLsPz9D-pc6ntnktcw&amp;usqp=CAU" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;/div&gt;
  
     &lt;div class="gallery_container"&gt;
              &lt;div class="gallery_Item"&gt;
                  &lt;div class="imgInGallery"&gt;
                      &lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRVy3Qlw07-BSIBiWkNRxZEYSHJKqQgvynzwQ&amp;usqp=CAU" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;/div&gt;
  
    &lt;div class="gallery_container"&gt;
              &lt;div class="gallery_Item"&gt;
                  &lt;div class="imgInGallery"&gt;
                      &lt;img src="https://pqina.nl/media/cat.jpeg" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;/div&gt;
  
  
    &lt;div class="gallery_container"&gt;
              &lt;div class="gallery_Item"&gt;
                  &lt;div class="imgInGallery"&gt;
                      &lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRmK_e1W8uKhev51wmsAZVqNO0PVhOl9u2o3w&amp;usqp=CAU" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>