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.
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.
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>
3
Answers
Have you tried
object-fit: cover
? Apply that property to yourimg
, so you can set theheight
andwidth
of the container, and theimg
will retain its aspect ratio.Read more: https://www.w3schools.com/css/css3_object-fit.asp
Fix the size of logo container and keep the transparent logo just in middle of container with fixed max-height.