1

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 and good for consistency.

Problem

Images sizes are diffrent. Some logos have higher width, less height like that. So I can't wrap logos into my fixed height, width box. It looks very messy.

enter image description here

My solution

I have given max width and max height to logo image. Then it automatically adjust and show without damaging aspect ratio. But most cases, show white spaces in left and right. I think it's normal.

enter image description here

Or do I need to use photoshop, make logo to my fixed height, width and upload? Or any other solution available for achieving this kind of situation?

My code

.img-wrap-quotes{
 text-align:center;
}
        
.img-wrap-quotes img {
 margin: 0 auto;
 max-height: 70px;
 max-width: 226px;
}
<div class="img-wrap-quotes">
 <img class="img-responsive " src="https://upload.wikimedia.org/wikipedia/en/1/1c/LegalAndGeneral_Logo.png">
</div>
Janath
  • 1,218
  • 4
  • 26
  • 53

3 Answers3

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-quotes img {
 margin: 0 auto;
 max-height: 70px;
 max-width: 226px;
}
<div class="img-wrap-quotes">
 <img class="img-responsive " src="https://upload.wikimedia.org/wikipedia/en/1/1c/LegalAndGeneral_Logo.png">
</div>
Deepak Kumar
  • 221
  • 3
  • 17
0

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-quotes img {
 margin: 0 auto;
 max-height: 70px;
 max-width: 226px;
 object-fit: cover;
}

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

barbarossa
  • 129
  • 1
  • 11
-1

.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*/
}
<div class="center">
    <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/en/1/1c/LegalAndGeneral_Logo.png">
    </div>
Cruzer
  • 405
  • 5
  • 13