I am trying to get the multiple university logo images in a row to scale down as the browser width gets smaller and not overflow its container div, just like I do with the blueish picture above. The picture scales within its div by applying max width and heigh of 100%. But the logo images do not scale in the same way and overflow the div.
Here is a live example: http://feroze.org/new-education/ - try resizing and see what I mean
Here is the css for the logos container div gray bar
#partners
height 105px
background-color #eee
white-space nowrap
width 100%
and here is the css applied to the logo images themselves
.logo-image
vertical-align middle
padding 13px
max-width 100%
display inline
As you can see I aligned them vertically in the grey bar. But as the bar shortens I want the images to stay within the div and resize according to the container div.
Any help would be greatly appreciated! Thanks
Not sure what HTML you've already got, but if the images are each wrapped inside a <div>
or <li>
then you can use display: table;
and display: table-cell
to ensure that no matter how many images, they'll always fit the width correctly.
body {
margin: 0;
}
#partners {
height: 105px;
background-color: #eee;
white-space: nowrap;
width: 100%;
display: table;
}
.logo-image {
vertical-align: middle;
padding: 13px;
display: table-cell;
}
.logo-image img {
max-width: 100%;
}
<div id="partners">
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
<div class="logo-image">
<img src="http://placehold.it/120x80" alt="Placeholder Image" />
</div>
</div>
Working demo here.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With