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 to vertically center items in a div while keeping responsiveness? [duplicate]

    How come bootstrap.min.css looks like commented

    How to get slanted borders in CSS

    How To Change Text Box Content On Hover

    How to target the chrome browser for Mac only?

    CSS HTML how to ignore some css for non ie7 or ie8

    How to bound CSS3 animation to class

    How can I change the background-color using ng-class?

    How to align buttons arround a circle image

    how to css absolute positioning right way

    How to make a box's content overflow past background

    Am centering content vertically using css, how to remove empty space?

    How to calculate sine, cosine in Less?

    How do you create a webpage with a floating image, top left, bottom right, and with wrapping text in the middle

    How to build a special polygon (a kite shape) with HTML & CSS only?

    How to Style CSS Checkboxes with Font Awesome

    How do you make HTML elements appear on a vertical line using CSS?

    jQuery - CSS DropDown Navigation Items - How to build a Carrot Dropdown

    How to make Css transition effect work on Safari and Chrome?

    White space in between banner image and menu bar on site-only 1080px screen and lower. How to fix? [closed]

    How do you prevent expanding outer element when adding padding? [duplicate]

    how to reference elements in CSS or JS files for fastest parsing?

    How to ensure a webpage's content extends to the bottom of a webpage using only CSS

    How to disable CSS style relatively to a certain parent tag?

    How to draw a CSS petagon with all borders radius?

    How to print multiple elements in a page individually using css?

    How to Programatically Toggle a Zurb Foundation Switch Control, in Chrome?

    How to add a new rule to an existing CSS class

    How can align css colums vertcally to the bottom?

    How to create a header.php and footer.php with CSS files?