Create a background for photos whose height is less than the frame

The photos I display are all 300 in 300, but the height of some of the photos is less than that and the proportions of the photos are shuffling.
Is there any way I can put lower-pixel photos in the center of a 300x300 image and be gray background it?

this is my css

.imageProduct {
    position: relative;
    overflow: hidden;
}

    .imageProduct img {
        width: 100%;
        transition: .5s;
    }

this is my code

   <div class="col-12 col-md-12  rounded ">
            <div class="imageProduct">

                    <img src="~/images/products/@item.ImageName" class="img-fluid mt-4" />
             

            </div>
      
        </div>

I’ve found that https://css-tricks.com/centering-css-complete-guide/ is an excellent guide, but I’m just a JavaScript coder. I’ve asked if this post can be moved to the CSS forum, as that’s where I think that you’ll find the best minds that can provide possibly better advice about centering an image on a colored background.

4 Likes

Centre an image in a gray box. There are several ways to achieve that. :slight_smile:

Try Flexbox, you could add this to your CSS:


.imageProduct{
	display:flex;
	width:300px;
	height:300px;
	background:gray;
	justify-content:center;
	align-items:center;
}

@Paul_Wilkins, good link!

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.