html - responsive web design with scaling image with always fully visible page -

i want build web page consists of 2 elements: area image shown , area text shown.

the content should totally visible regardless of page size, without outside, without need scrolling.

there should 2 layouts:

1. wide (for page widths > 800px): image area on left (75% of page width), text area on right (20% of page width), both 95% of page height.
2. narrow: image area on top (75% of page height), text area below (20% of page height), both 95% of page width.

the original image can have different widths , heights, ratio can different, when displayed should fit maximum possible size image area, centered (for instance image of 1000x500px should 800x400px in 800x800px div, 200px upper border).

is there responsive solution without fixed or explicit pixel amounts?

if not, best solution?

you can css media query , tricks center images vertically , horizontally.

:

.wrapper {    position: absolute;    height: 100%;    width: 100%;  }    .image-container {    width: 75%;    height: 95%;    background: red;    float: left;    position: relative;  }    .image-container img {    max-width: 100%;    max-height: 100%;    position: absolute;    margin: auto;    top: 0;    left: 0;    right: 0;    bottom: 0;  }    .text-container {    width: 20%;    height: 95%;    background: green;    float: right;  }    @media screen , ( max-width: 800px ) {    .image-container {      float: none;      width: 95%;      height: 75%;    }       .text-container {      float: none;      width: 95%;      height: 20%;    }  }

<div class="wrapper">    <div class="image-container">      <img src="http://sport-nc.com/wp-content/uploads/2015/06/india_surf_tours_-_17__1_.jpg"/>    </div>    <div class="text-container"></div>  </div>