Images do not rescale with CSS - html

Question

I have three .svg images that need to resize. For some reason they do not resize, except when the screen is exceptionally small.
html:
<div class='au-images'>
<div class='computer'>
<p data-sr style='max-width: 180px;'><img src='images/computericon.svg'></p>
</div>
<div class='tablet'>
<p data-sr='wait 0.5s' style='max-width: 180px;'><img src='images/tableticon.svg'></p>
</div>
<div class='phone'>
<p data-sr='wait 1s' style='max-width: 180px;'><img src='images/phoneicon.svg'></p>
</div>
I am also using scroll-reveal, which explains the 'data-sr' tag.
My CSS:
.computer,.tablet, .phone {
max-width: 33%;
display: inline-block;
padding: 0em 2.5em;
}
.computer img, .tablet img, .phone img {
max-width: 100%;
height: auto;
}
Can someone explain to me why my images don't resize?

Answer 1

The problem is that you don't set the width on the parent elements of the images. CSS can't calculate a max-width of a max-width, so it uses the max-width of the only width it knows, namely the body.
Your code in a fiddle (modified to show some actual images)
So the solution is to give the parent divs a width instead of a max-width. Since you used padding, I also changed the box sizing to include that.
box-sizing: border-box;
width: 30%;
Updated code in a fiddle.
Please note that I reduced the width to 30%, because the divs have spaces between them; with 33%, the total width would be 99% plus the width of those two spaces, which may exceed the window.
If you don't want that, remove all whitespace between the inner divs.
Even more updated fiddle, now using widths of 33.33%

Answer 2

You can try to use the width unit vw. This unit is the viewport width expressed in percent. That is 100vw is the full width of your device.
Take a look at this example: http://jsfiddle.net/v929q8mn/1/
div.blablabla img {
display: inline-block;
margin: 0;
width: 30vw;
}
It is supported in most browsers.