Wrap Image In Fixed Height And Width

I have few boxes with texts blocks including logo images. Logo images come from back end. My client needs to wrap those images in fixed width and height. So the boxes look uniform

Solution 1:

Fix the size of logo container and keep the transparent logo just in middle of container with fixed max-height.

.img-wrap-quotes{
 max-height: 70px;
 max-width: 226px;
 width:226px;
 height:70px;
 background:#0000ff;
 text-align:center;
}
        
.img-wrap-quotesimg {
 margin: 0 auto;
 max-height: 70px;
 max-width: 226px;
}

<divclass="img-wrap-quotes"><imgclass="img-responsive "src="https://upload.wikimedia.org/wikipedia/en/1/1c/LegalAndGeneral_Logo.png"></div>

Solution 2:

Have you tried object-fit: cover? Apply that property to your img, so you can set the height and width of the container, and the img will retain its aspect ratio.

.img-wrap-quotesimg {
 margin: 0 auto;
 max-height: 70px;
 max-width: 226px;
 object-fit: cover;
}

Read more: https://www.w3schools.com/css/css3_object-fit.asp

Solution 3:

.center {
    margin: auto;
    width: 40%; /*set width as you need it*/border: 3px solid #73AD21; /* just added border to check the alignment you can adjust*/padding: 10px;
    background:#ccc;  /* just added bg to check the alignment*/
}

<divclass="center"><imgclass="img-responsive"src="https://upload.wikimedia.org/wikipedia/en/1/1c/LegalAndGeneral_Logo.png"></div>