图片未在 div 内完整显示 width/height

Image isn't displaying full width/height within div

我希望我的图像行看起来像下图（边距仍然存在），但也希望图像显示 100% 的宽度。好像剪掉了一些图片。

我还希望它在移动视图中显示图像的整个高度和宽度。这是它在移动视图中的样子：

/* --------------------------------------------------------------------------------------------------------------------------- 
START OF HEADSTONE-CATEGORY-SECTION CONTENT
---------------------------------------------------------------------------------------------------------------------------  */

.headstone-category-container {
  max-width: 100%;
  margin: 0 auto;
} /* Sets headstone category divs to take up 100% of the available width within its container */

.grid-row {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
} /* Sets the way the headstone category divs are displayed (horizontally) 
and allows for them to wrap round each other when screen adjusting */

.grid-item2 {
  height: 100%;
  flex-basis: 20%;
  -ms-flex: auto;
  width: 100%;
  position: relative;
  padding: 0.75%;
  box-sizing: border-box;
} /* Sets padding between headstone category divs, sets sizing and sets for row to be 5 divs */

.wrapping-link {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
  color: currentColor;
} /* Allows the user to be able to click anywhere within the headstone category div to access the href link */

.grid-item-wrapper {
  padding: 4px;
  -webkit-box-sizing: initial;
  -moz-box-sizing: initial;
  box-sizing: initial;
  background: #ececec;
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  -webkit-transition: padding 0.15s cubic-bezier(0.4,0,0.9,1), margin 0.15s cubic-bezier(0.4,0,0.9,1), box-shadow 0.15s cubic-bezier(0.4,0,0.9,1);
  transition: padding 0.15s cubic-bezier(0.4,0,0.9,1), margin 0.15s cubic-bezier(0.4,0,0.9,1), box-shadow 0.15s cubic-bezier(0.4,0,0.9,1);
  position: relative;border-radius: 12px;
  border: 1px solid black;
} /* Adds styling, sets sizing and sets transition speed of the headstone category div */

.grid-item-container2 {
  height: 100%;
  width: 100%;
  position: relative;
} /* Allows content to use full width and height of the headstone category div. Also styles the div. */

.grid-image-top2 {
  min-height: 375px;
  max-height: 575px;
  max-width: 100%;
  background-size: cover;
  position: relative;
  background-position: 50% 50%;
  border-radius: 12px;
  margin: 5%;
} /* Sets sizing and positioning of the images within the headstone category divs */ 

.grid-image-top2.lawn-memorials {
  background-image: url("https://www.kayparkmemorials.com/memorials/lawnmemorials/images/lawn43.jpg");
} /* Adds image to headstone category div for the lawn memorials */

.grid-image-top2.churchyard-memorials {
  background-image: url("https://www.kayparkmemorials.com/memorials/lawnmemorials/images/lawn13.jpg");
} /* Adds image to headstone category div for the churchyard memorials */

.grid-image-top2.children-memorials {
  background-image: url("https://www.kayparkmemorials.com/memorials/lawnmemorials/images/lawn27.jpg");
} /* Adds image to headstone category div for the children memorials */

.grid-image-top2.heart-memorials {
  background-image: url("https://www.kayparkmemorials.com/memorials/lawnmemorials/images/lawn42.jpg"); 
} /* Adds image to headstone category div for the heart memorials */

.grid-image-top2.books-memorials {
  background-image: url("https://www.kayparkmemorials.com/memorials/lawnmemorials/images/lawn13.jpg"); 
} /* Adds image to headstone category div for the books, scrolls and vases */

.grid-item-content {
  padding: 0 20px 20px 20px;
} /* Adds padding to the text within the headstone category divs */

.grid-item2:hover .grid-item-wrapper {
  padding: 1.5% 1.5%;
  margin: -1.5% -1.5%;
  background-image: linear-gradient(to right, rgb(223, 219, 219) , rgb(252, 252, 250));
} /* Adds the padding for when users hover over the headstone category div. Also adds gradient to the small extra space added within the padding */

  /* 83em = 1327px*/
@media(max-width: 1327px) {
  .grid-item2 {
    flex-basis: 25%;
  } /* Sets the headstone category divs to display in a row of 4 */
}

@media(max-width: 1073px) {
   .grid-item2 {
    flex-basis: 33.33%;
  } /* Sets the headstone category divs to display in a row of 3 */
}

/* 48em = 768px*/
@media(max-width: 768px) {
  .grid-item2 {
    flex-basis: 50%;
  } /* Sets the headstone category divs to display in a row of 2 */
}

/* 36em = 577px*/
@media(max-width: 577px) {
  .grid-item2 {
    flex-basis: 100%;
    margin-bottom: 3.5%;
  } /* Adds bottom margin to the headstone category divs */
}

/* --------------------------------------------------------------------------------------------------------------------------- 
END OF HEADSTONE-CATEGORY-SECTION CONTENT
---------------------------------------------------------------------------------------------------------------------------  */

<section id="headstone-category-section" class="headstone-category-section"> <!-- Start of section -->
  <div class="headstone-category-container"> <!-- Start of div -->
  <h1>Most Popular Headstones:</h1>
  <div class="grid-row"> <!-- Start of div -->
      <div class="grid-item2"> <!-- Start of div -->
        <a class="wrapping-link" href="#"></a> <!-- Takes user to the designated link when user's click on the headstone category div -->   
        <div class="grid-item-wrapper"> <!-- Start of div -->
          <div class="grid-item-container2"> <!-- Start of div -->
            <div class="grid-image-top2 lawn-memorials"> <!-- Start of div -->
              <span class="centered project-image-bg rex-ray-image"></span>
            </div> <!-- End of div -->
            
          </div> <!-- End of div -->
        </div> <!-- End of div -->
      </div> <!-- End of div -->
      <div class="grid-item2"> <!-- Start of div -->
        <a class="wrapping-link" href="#"></a> <!-- Takes user to the designated link when user's click on the headstone category div -->      
          <div class="grid-item-wrapper"> <!-- Start of div -->
            <div class="grid-item-container2"> <!-- Start of div -->
              <div class="grid-image-top2 churchyard-memorials"> <!-- Start of div -->
                <span class="centered project-image-bg sputnik-image"></span>
              </div> <!-- End of div -->
              
            </div> <!-- End of div -->
          </div> <!-- End of div -->
        </div> <!-- End of div -->
        <div class="grid-item2"> <!-- Start of div -->
          <a class="wrapping-link" href="#"></a> <!-- Takes user to the designated link when user's click on the headstone category div --> 
            <div class="grid-item-wrapper"> <!-- Start of div -->
              <div class="grid-item-container2"> <!-- Start of div -->
                <div class="grid-image-top2 children-memorials"> <!-- Start of div -->
                  <span class="centered project-image-bg edgex-image"></span>
                </div> <!-- End of div -->
                
              </div> <!-- End of div -->
            </div> <!-- End of div -->
          </div> <!-- End of div -->
          <div class="grid-item2"> <!-- Start of div -->
            <a class="wrapping-link" href="#"></a> <!-- Takes user to the designated link when user's click on the headstone category div -->
            <div class="grid-item-wrapper"> <!-- Start of div -->
              <div class="grid-item-container2"> <!-- Start of div -->
                <div class="grid-image-top2 heart-memorials"> <!-- Start of div -->
                  <span class="centered project-image-bg openswitch-image"></span>
                </div> <!-- End of div -->
                
              </div> <!-- End of div -->
            </div> <!-- End of div -->
          </div> <!-- End of div -->
          <div class="grid-item2"> <!-- Start of div -->
            <a class="wrapping-link" href="#"></a> <!-- Takes user to the designated link when user's click on the headstone category div -->
            <div class="grid-item-wrapper"> <!-- Start of div -->
              <div class="grid-item-container2"> <!-- Start of div -->
                <div class="grid-image-top2 books-memorials"> <!-- Start of div -->
                  <span class="centered project-image-bg scaleio-image"></span>
                </div> <!-- End of div -->
                
              </div> <!-- End of div -->
            </div> <!-- End of div -->
          </div> <!-- End of div -->
        </div> <!-- End of div -->
      </div> <!-- End of div -->
      
  </div> <!-- End of heastone-category-container div -->
</section> <!-- This section displays the headstone-category-section -->

主要问题是background-size: cover;。如果将其设置为 contain，则在调整浏览器大小时不应裁剪图像。请注意，我还添加了 background-repeat: no-repeat;。现在边框有点奇怪，但这是一个不同的问题，我建议你把白色背景和灰色边框来实现你原来的实现。

/* --------------------------------------------------------------------------------------------------------------------------- 
START OF HEADSTONE-CATEGORY-SECTION CONTENT
---------------------------------------------------------------------------------------------------------------------------  */

.headstone-category-container {
  max-width: 100%;
  margin: 0 auto;
} /* Sets headstone category divs to take up 100% of the available width within its container */

.grid-row {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
} /* Sets the way the headstone category divs are displayed (horizontally) 
and allows for them to wrap round each other when screen adjusting */

.grid-item2 {
  height: 100%;
  flex-basis: 20%;
  -ms-flex: auto;
  width: 100%;
  position: relative;
  padding: 0.75%;
  box-sizing: border-box;
} /* Sets padding between headstone category divs, sets sizing and sets for row to be 5 divs */

.wrapping-link {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
  color: currentColor;
} /* Allows the user to be able to click anywhere within the headstone category div to access the href link */

.grid-item-wrapper {
  padding: 4px;
  -webkit-box-sizing: initial;
  -moz-box-sizing: initial;
  box-sizing: initial;
  background: #ececec;
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  -webkit-transition: padding 0.15s cubic-bezier(0.4,0,0.9,1), margin 0.15s cubic-bezier(0.4,0,0.9,1), box-shadow 0.15s cubic-bezier(0.4,0,0.9,1);
  transition: padding 0.15s cubic-bezier(0.4,0,0.9,1), margin 0.15s cubic-bezier(0.4,0,0.9,1), box-shadow 0.15s cubic-bezier(0.4,0,0.9,1);
  position: relative;border-radius: 12px;
  border: 1px solid black;
} /* Adds styling, sets sizing and sets transition speed of the headstone category div */

.grid-item-container2 {
  height: 100%;
  width: 100%;
  position: relative;
} /* Allows content to use full width and height of the headstone category div. Also styles the div. */

.grid-image-top2 {
  min-height: 375px;
  max-height: 575px;
  max-width: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  background-position: 50% 50%;
  border-radius: 12px;
  margin: 5%;
} /* Sets sizing and positioning of the images within the headstone category divs */ 

.grid-image-top2.lawn-memorials {
  background-image: url("https://www.kayparkmemorials.com/memorials/lawnmemorials/images/lawn43.jpg");
} /* Adds image to headstone category div for the lawn memorials */

.grid-image-top2.churchyard-memorials {
  background-image: url("https://www.kayparkmemorials.com/memorials/lawnmemorials/images/lawn13.jpg");
} /* Adds image to headstone category div for the churchyard memorials */

.grid-image-top2.children-memorials {
  background-image: url("https://www.kayparkmemorials.com/memorials/lawnmemorials/images/lawn27.jpg");
} /* Adds image to headstone category div for the children memorials */

.grid-image-top2.heart-memorials {
  background-image: url("https://www.kayparkmemorials.com/memorials/lawnmemorials/images/lawn42.jpg"); 
} /* Adds image to headstone category div for the heart memorials */

.grid-image-top2.books-memorials {
  background-image: url("https://www.kayparkmemorials.com/memorials/lawnmemorials/images/lawn13.jpg"); 
} /* Adds image to headstone category div for the books, scrolls and vases */

.grid-item-content {
  padding: 0 20px 20px 20px;
} /* Adds padding to the text within the headstone category divs */

.grid-item2:hover .grid-item-wrapper {
  padding: 1.5% 1.5%;
  margin: -1.5% -1.5%;
  background-image: linear-gradient(to right, rgb(223, 219, 219) , rgb(252, 252, 250));
} /* Adds the padding for when users hover over the headstone category div. Also adds gradient to the small extra space added within the padding */

  /* 83em = 1327px*/
@media(max-width: 1327px) {
  .grid-item2 {
    flex-basis: 25%;
  } /* Sets the headstone category divs to display in a row of 4 */
}

@media(max-width: 1073px) {
   .grid-item2 {
    flex-basis: 33.33%;
  } /* Sets the headstone category divs to display in a row of 3 */
}

/* 48em = 768px*/
@media(max-width: 768px) {
  .grid-item2 {
    flex-basis: 50%;
  } /* Sets the headstone category divs to display in a row of 2 */
}

/* 36em = 577px*/
@media(max-width: 577px) {
  .grid-item2 {
    flex-basis: 100%;
    margin-bottom: 3.5%;
  } /* Adds bottom margin to the headstone category divs */
}

/* --------------------------------------------------------------------------------------------------------------------------- 
END OF HEADSTONE-CATEGORY-SECTION CONTENT
---------------------------------------------------------------------------------------------------------------------------  */

<section id="headstone-category-section" class="headstone-category-section"> <!-- Start of section -->
  <div class="headstone-category-container"> <!-- Start of div -->
  <h1>Most Popular Headstones:</h1>
  <div class="grid-row"> <!-- Start of div -->
      <div class="grid-item2"> <!-- Start of div -->
        <a class="wrapping-link" href="#"></a> <!-- Takes user to the designated link when user's click on the headstone category div -->   
        <div class="grid-item-wrapper"> <!-- Start of div -->
          <div class="grid-item-container2"> <!-- Start of div -->
            <div class="grid-image-top2 lawn-memorials"> <!-- Start of div -->
              <span class="centered project-image-bg rex-ray-image"></span>
            </div> <!-- End of div -->
            
          </div> <!-- End of div -->
        </div> <!-- End of div -->
      </div> <!-- End of div -->
      <div class="grid-item2"> <!-- Start of div -->
        <a class="wrapping-link" href="#"></a> <!-- Takes user to the designated link when user's click on the headstone category div -->      
          <div class="grid-item-wrapper"> <!-- Start of div -->
            <div class="grid-item-container2"> <!-- Start of div -->
              <div class="grid-image-top2 churchyard-memorials"> <!-- Start of div -->
                <span class="centered project-image-bg sputnik-image"></span>
              </div> <!-- End of div -->
              
            </div> <!-- End of div -->
          </div> <!-- End of div -->
        </div> <!-- End of div -->
        <div class="grid-item2"> <!-- Start of div -->
          <a class="wrapping-link" href="#"></a> <!-- Takes user to the designated link when user's click on the headstone category div --> 
            <div class="grid-item-wrapper"> <!-- Start of div -->
              <div class="grid-item-container2"> <!-- Start of div -->
                <div class="grid-image-top2 children-memorials"> <!-- Start of div -->
                  <span class="centered project-image-bg edgex-image"></span>
                </div> <!-- End of div -->
                
              </div> <!-- End of div -->
            </div> <!-- End of div -->
          </div> <!-- End of div -->
          <div class="grid-item2"> <!-- Start of div -->
            <a class="wrapping-link" href="#"></a> <!-- Takes user to the designated link when user's click on the headstone category div -->
            <div class="grid-item-wrapper"> <!-- Start of div -->
              <div class="grid-item-container2"> <!-- Start of div -->
                <div class="grid-image-top2 heart-memorials"> <!-- Start of div -->
                  <span class="centered project-image-bg openswitch-image"></span>
                </div> <!-- End of div -->
                
              </div> <!-- End of div -->
            </div> <!-- End of div -->
          </div> <!-- End of div -->
          <div class="grid-item2"> <!-- Start of div -->
            <a class="wrapping-link" href="#"></a> <!-- Takes user to the designated link when user's click on the headstone category div -->
            <div class="grid-item-wrapper"> <!-- Start of div -->
              <div class="grid-item-container2"> <!-- Start of div -->
                <div class="grid-image-top2 books-memorials"> <!-- Start of div -->
                  <span class="centered project-image-bg scaleio-image"></span>
                </div> <!-- End of div -->
                
              </div> <!-- End of div -->
            </div> <!-- End of div -->
          </div> <!-- End of div -->
        </div> <!-- End of div -->
      </div> <!-- End of div -->
      
  </div> <!-- End of heastone-category-container div -->
</section> <!-- This section displays the headstone-category-section -->