How do I make images responsive with pure css? - css

Question

I have a Wordpress menu that I've made the tabs background images. I am trying to get the images to scale down when the .wrapper scales down and keep them in a horizontal row and avoid javascript and/or media queries or navwalker class as I'm using bootstrap.
This is what the menu looks like full scale:
Here is my code for my .wrapper and for a one out of the 9 menu-items and the nav class and logo structure. Please note I'm trying to apply the same concept to the logo.
I am using html5blank and Wordpress menu.
<div class="nav" role="navigation">
<?php html5blank_nav(); ?>
</div>
here is the html it renders of one of the 9 <li>'s ( that I'm styling in the css )
<li id="menu-item-1688" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1688">Blog</li>
.wrapper {
max-width:1280px;
width:95%;
margin:0 auto;
position:relative;
}
.logo {
float:left;
width:145px;
height:157px;
}
.nav {
float:left;
padding-top:11px;
}
.nav ul {
padding:0;
margin:0;
}
.nav ul li {
float:left;
list-style-type:none;
padding:0;
margin:0;
}
li#menu-item-1688 a {
display:block;
background:url('img/ksl_news.png');
background-repeat:no-repeat;
width:110px;
height:119px;
color:transparent;
margin-top:27px;
}

Answer 1

You can use a quirk of the padding property to do this: the values for padding-top/padding-bottom when specified as percentages are calculated based on the width of the element (this also applies for margins).
Minimal example:
a {
background: url('http://i.stack.imgur.com/4kaLj.png');
background-size: contain;
display: block;
padding-top: 12.6324%;
}
The 12.6324% comes from the aspect ratio of your image: height/width*100 = 310/2454*100 = 12.6324%.
display: block; causes the element to take 100% width of it's container. Together, this solves your problem, as long as you know the aspect ratio of your images so you can calculate these percentages, this will work.
Jsfiddle example.

Answer 2

So here's an odd approach to this - using display: table in order to avoid needing to know the number of menu items you'll have. It's not quite perfect - as the images can sometimes be a pixel off in size, but if this works for you then great :)
HTML:
<div class="container">
<nav class="nav">
<ul>
<li class="logo"><img src="//placehold.it/145x157" /></li>
<li><img src="//placehold.it/110x119" /></li>
<li><img src="//placehold.it/110x119" /></li>
<li><img src="//placehold.it/110x119" /></li>
<li><img src="//placehold.it/110x119" /></li>
<li><img src="//placehold.it/110x119" /></li>
<li><img src="//placehold.it/110x119" /></li>
<li><img src="//placehold.it/110x119" /></li>
<li><img src="//placehold.it/110x119" /></li>
<li><img src="//placehold.it/110x119" /></li>
</ul>
</nav>
</div>
CSS:
.nav {
display: table;
width: 100%;
}
.nav ul {
display: table-row;
}
.nav li {
list-style: none;
padding: 0px;
margin: 0px;
display: table-cell;
vertical-align: bottom;
}
.nav img {
max-width: 100%;
border: solid 1px #000;
}
JSFiddle Example.
However if the slight difference in cell size is a problem for you (it is quite noticable), but you are happy to have a hard-coded requirement in css of the number of items in your menu, try using the same markup with the followng CSS instead:
.nav ul {
margin: 0px;
padding: 0px;
font-size: 0px;
}
.nav li {
list-style: none;
padding: 0px;
margin: 0px;
display: inline-block;
vertical-align: bottom;
max-width: 9%;
}
.nav li.logo {
max-width: 11%;
}
.nav img {
max-width: 100%;
border: solid 1px #000;
}
Jsfiddle example.