How to fit image into table cell by height with CSS (where the height is not defined explicitly)


Tags: html,css

Problem :

I have a table. The height of it comes as a size of content. The first cell in a row has a text and it defines the height. The second cell in a row have an image. The image should be fitted (shrunk) into the height of the row.

This is what I need

enter image description here

What I've made is working in Chrome but it is not working in IE, please have a look.

jsfiddle

#t{
			background: aliceblue;
			display: table;    			
		}
		.r{
			display:table-row;
		}
		.c{
			display:table-cell;
			border:solid black 1px;
			background: aqua;
			vertical-align: middle;
			position: relative;			
		}
		#i{
			height: 100%;    			
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}
<div id='t'>
		<div class='r '>
			<div class='c'>
				a<br>
				b<br>
				c<br>
				d<br>
				e<br>
				f<br>
			</div>
			<div class='c'>
				<img id="i" src="http://www.cnc3.co.tt/sites/default/files/content/Glee.png">
			</div>
		</div>
	</div>



Solution :

I suggest to put picture as a background.

jsfiddle

#t{
			background: aliceblue;
			display: table;
			width: 300px;
		}
		.r{
			display:table-row;
		}
		.c{
			display:table-cell;
			border:solid black 1px;
			background: aqua;
			vertical-align: middle;
			position: relative;
            width:50%;
		}
		#i{
			height: 100%;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}

#img_cell{
	background-image: url("http://www.cnc3.co.tt/sites/default/files/content/Glee.png");
	background-repeat: no-repeat;
	background-position: center; 
	background-size: contain;
}
<div id='t'>
		<div class='r '>
			<div class='c'>
				a<br>
				b<br>
				c<br>
				d<br>
				e<br>
				f<br>
			</div>
			<div id='img_cell' class='c'>
            </div>
		</div>
	</div>


    CSS Howto..

    How do I use PHP to apply css properties? [closed]

    how do i align contact form 7 next to text

    How to add a class if div height reaches a fixed height?

    CSS: How to accomplish a div which is blurred at the edges?

    How can I fit images in full height columns in Bootstrap?

    How to set the background image width using CSS?

    HTML/CSS how to temporarily highlight a section of a page [duplicate]

    How to get page-header and nav-pills to appear on the same line

    how to make the parent width equals the width of all element inside it?

    How to format text using CSS

    how to give style to the selected option in html

    How to horizontally center text in bootstrap button?

    how to remove some css attributes defined by bootstrap

    How to make .less files to have .css syntax highlight in Vim?

    How to restrict character limit by line or # of characters with css?

    How to build a hover effect with css only, or css+jquery

    Ruby Command Line: How can I send the CTRL-C command via text in the command line?

    How to make my right-box float right…?

    How to remove text flicker in CSS?

    How to create table with resizable row and columns like HTML, CSS, JS boxes on JSFiddle?

    CSS: how to “plot” invisible text over an image?

    How to align css class using bootstrap

    How to give a javascript function and css style in struts2 property tag

    How to display a dynamic rating based on css and the value from PHP? [closed]

    How to put a picture on top of other without using Positioning, Divs or Backgrounds?

    How to position css sprite play button within video image

    How can I dock the button to jQueryUI dialog bottom as the dialog inner content increases?

    how to create circle that cut off one piece with css

    Show button after login

    how to avoid bullets showing in main menu