html - Responsive resizing image-height to fit text-div next to it -


im creating 2 colum website, having fit pictures next text-boxes. images have resize according text-divs, @ time cover 50% width each, , height defined div containing text. (eg. imagine pulling window lesser width, text fill more in height, , image have fill same height, , still centered in container , keep aspect-ratio.) possible using html , css, , if so, how?

you combine table solution background-size: cover; solution.

demo: https://jsfiddle.net/64gzjah4/2/

css:

td {     border: 1px solid red;     width: 50%; } td:first-child {     background-image: url('http://placekitten.com/g/200/300');     background-repeat: no-repeat;     background-size: cover; /* make image cover td */     background-position: 50% /* center image inside td */ } 

html:

<table>     <tr>         <td>         </td>         <td>             text goes here         </td>     </tr> </table> 

what browser support need? ie8 not support background-size property, property perfect need, don't need support ie8 ;) http://caniuse.com/#feat=background-img-opts


Comments

Popular posts from this blog

facebook - android ACTION_SEND to share with specific application only -

python - Creating a new virtualenv gives a permissions error -

javascript - cocos2d-js draw circle not instantly -