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
Post a Comment