Проблема масштабируемости рисунка img в div контейнере

Есть рисунок который я поместил в контейнер. Контейнер имеет свойство border: 5px ridge #254c72;. Проблема в том, что когда я масштабирую страницу, между рисунком и рамкой контейнера появляется пространство свободное. Оно может возникнуть с любой стороны, либо с обеих одновременно. Подскажите пожалуйста как решить проблему. margin:0 и padding:0 проблемы не решают.

 <style>
    content div{
        border: 5px ridge #254c72;
        display: inline-block;        
    }
    content img{
        display:block;
    }
 </style>

<header>
    <img src="img/title.jpg" alt="header image">
</hader>
<h1>Компьютерная графика и web-дизайн</h1>
<content>
    <div><img src="design/small/p0.jpg" alt="sunset"></div>
    <div><img src="design/small/p1.jpg" alt="girl"></div> 
    <div><img src="design/small/p2.jpg" alt="cats"></div>
    <div><img src="design/small/p3.jpg" alt="matrix"></div>
    <div><img src="design/small/p4.jpg" alt="abstraction"></div>
    <div><img src="design/small/p5.jpg" alt="step"></div>
    <div><img src="design/small/p6.jpg" alt="suslic and suslikcathead"></div>
</content>