How to maintain a nice logo in a fix height div? - css

Question

I want to have a nice looking box AND a nice looking logo in that box (logos are for example purpose only).
BUT I don't know how to do that.
I have my image tag look like this
<img class="col-sm-12 pull-right" src="/marketing_materials/{{$marketing_material->id}}/download/thumb_path" alt="" />
If I include the width="200" height="200" in the <img> tag, my view will look like this.
I got a nice looking box, but ugly logo(stretch).
Else if I include the width="200" only in the <img> tag, my view will look like this.
I got a nice looking logo, but ugly box(doesn't line up).
Either way, I chose will screw up my view. :(

Answer 1

You could put your image in a 200x200 div and center your image (but not stretch it) inside it like this:
.imgbox{
border:solid 4px grey;
border-radius:5px;
width:200px;
height:200px;
display: table-cell; vertical-align: middle
}
<div class="imgbox">
<img src="http://img3.wikia.nocookie.net/__cb20100520131746/logopedia/images/5/5c/Google_logo.png">
</div>

Answer 2

Using the background-size property is the simplest way.
Read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
* { margin:0; padding:0 }
figure.logo {
width: 200px;
height: 200px;
background-image: url('http://i.imgur.com/F0RRqFy.jpg');
background-size: cover;
}
<figure class="logo"></figure>
Editable Demo: http://jsbin.com/gituzu/2/edit?html,css,output

Answer 3

you can center the images horizontal and vertical to the parent width and height by using position: absolute;:
HTML:
<div class="img_wrap">
<img src="https://pbs.twimg.com/profile_images/453545705622106112/6ERHbJBN.jpeg" />
</div>
<div class="img_wrap">
<img src="http://wottageek.com/wp-content/uploads/2014/10/Dropbox-Logo.png" />
</div>
<div class="img_wrap">
<img src="https://longren.io/wp-content/uploads/2014/04/do.png" />
</div>
CSS:
.img_wrap
{
width: 200px;
height: 200px;
position: relative;
float: left;
margin-right: 10px;
border: 5px solid #ccc;
}
.img_wrap img
{
max-width: 100%;
max-height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
example: http://jsfiddle.net/82bhzxfe/