css - Center image and text at large width, allow both to shrink at small width? -

i have image , text. when layout wider image need image , text centered, , text wide image. when layout smaller need image , text shrink.

my layout responsive , content dynamic dimensions of image change.

the first part can achieved this: http://codepen.io/anon/pen/zgyomb

<div class="cont">   <div class="cont2">    <img src="http://www.vector-finder.com/site-images/too_big/fantasy_banner_vector.jpg" />    <p>some text here. text here. text here. text here. text here. text here. text here. text here. text here. text here. text here. text here. text here. text here. text here. text here. text here. </p>    </div>   </div>  .cont {   text-align: center; } .cont2 {   display: table;   width: 1px;   margin: auto; } p {   display: inline-block; } img {   //max-width: 100%; } 

however when set image have max width of 100% can shrink @ smaller displays, shrinks regardless. know happening because of styles applied div.cont2, need these styles when layout wider image.

is there solution? image dynamic content , width vary can't use media query arbitrary break point.

here simplified demo, has been tested , works great on ie8+, chrome , firefox.

jsfiddle demo

body {      margin: 0; /* reset default margin */  }  div {      display: table; /* shrink fit content */      margin: 0 auto; /* center element */      text-align: center; /* center content inside */  }  img {      width: 100%; /* maintain image width responsive */      height: auto; /* maintain image aspect ratio */  }  p {      display: table-caption; /* magic part, shrink fit */      caption-side: bottom; /* place bottom */  }

<div>      <img src="http://i.imgur.com/ihaa1yt.jpg" />      <p>some text here. text here. text here. text here. text here. text here. text here. text here. text here. text here. text here. text here. text here. text here. text here. text here. text here.</p>  </div>