htmlcssflexboxresponsive-images
Image isn't displaying full width/height within div
I would like for my row of images to look like the following image (with the margins still in place), but to also have the image showing 100% of it's width. It appears to be cutting out some of the images.
I would also like for it to show the whole height and width of the image while in mobile view. This is how it looks in mobile view:
/* ---------------------------------------------------------------------------------------------------------------------------
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 -->Solution
The main issue is background-size: cover;. If you set it to contain it should not crop the image when resizing the browser. Note that I have also added background-repeat: no-repeat;. Now the borders are a little odd but that is a different problem, I suggest you to put white background and grey border to achieve your original implementation.
/* ---------------------------------------------------------------------------------------------------------------------------
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 -->