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
What I've made is working in Chrome but it is not working in IE, please have a look.
#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.
#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..
Do you need to use bootstrap? What you have so far is incredibly convoluted simply to center some text. This is all you need: #centered { position:absolute; top: 50%; left:...
Further, the /*! preserves the comment through the minify process.
There is so much you can learn from just inspecting using the developers tools from Firefox or Chrome... and this is just what I took from that website: http://codepen.io/anon/pen/BjoWYe the...
You need the follwing HTML mark-up: <a href="#" class="a-1">one</a> <a href="#"class="a-2">two</a> <a href="#"class="a-3">three</a> <div class="element-1">hello one</div> <div class="element-2">hello two</div> <div class="element-3">hello...
Use JavaScript something like below. if (navigator.userAgent.match(/Macintosh/) && navigator.userAgent.match(/Chrome/)) ...
Use a conditional comment to load a stylesheet exclusively for IE8 and below, and use it to load all your hax. <!--[if lte IE 8]><link rel="stylesheet" href="ie-hax.css" /><![endif]--> ...
Just use unique names for both animations (notice the first and second): div{ width:150px; height:150px; } .pulsor_red { -webkit-animation: first .4s infinite alternate; -moz-animation: first .4s infinite alternate; -animation: first...
You could easily use ng-style here <input type="text" ng-model="myValue" ng-style="{'background-color':myValue == 5 ? 'red': 'white'}"/> Using ng-class it would be Markup <input type="text" ng-model="myValue" ng-class="{'myOwnBg': myValue == 5}"/> CSS .myOwnBg...
I've recently encountered smth like that! media queries will do also the work, but i think playing dynamically with percentages is a lot easier! <!DOCTYPE html> <html> <head> <meta charset="utf-8"...
So, you want to know what's happening, huh? absolute positioning aligns the element "on top of" the parent who has a relative position. So, placing your square like: +-----+-----------------------+ |XXXXX|...
Use relative positioning, top, and possibly left. position: relative; top: -25px; left: -15px; Relative Positioning was defined in CSS 2.0. Which means no CSS3 required and it will work on...
Your code is right and there's not "empty space" as in the picture you posted. So the problem is somewhere else in the code. Probably some css property of the...
Well, it is not quite language-independent, but since it is just Javascript it should work in all the LESS implementations, unless I'm not thinking about this clearly. That being said,...
Something like this: HTML <div id="content"> <img src="http://placehold.it/100x100" class="align-left"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque beatae voluptatum illo cupiditate culpa temporibus quasi sapiente aperiam eius quas?...
With CSS : Using: only HTML and CSS 2 elements and 2 pseudo elements border-radius and transforms for the inner lines the border technique for the bottom triangle .kite {...
Ok, that CSS you have won't work because its wrong. Why? Because when you say "input + label", you should have an HTML markup like the one below: <input type="checkbox"...
You can use a table: <table> <tr> <td>You own</td> <td>20</td> </tr> <tr> <td>Price</td> <td>20</td> </tr> <tr> <td>BPS</td> <td>0.50</td> </tr> </table> or floating divs: <div...
$("button").next().hide(); $("button .carrot").click(function() { $button = $(this).parent().toggleClass("active"); $button.parent().next().toggle().offset($button.offset()); }); if your html looks like this: <button>Button <span class="carrot">v</span></button> <ul> <li>blah blah...
Try this: .button:hover { -webkit-animation: pulse 1.1s ease-out; -webkit-animation-iteration-count: infinite; animation: pulse 1.1s ease-out; animation-iteration-count: infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(85,172,238,0); } 25%...
Apply display: block to the img inside your banner container.
What you want is the box-sizing property. Take a look at this jsFiddle for it in practice. Just add this: -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; to your #login CSS....
If speed is a priority you might want to switch to vanilla javascript as much as you can. Native javascript is faster than jQuery. If you want to keep your...
One solution is to use absolute positioning of your elements. The content section is then offset by the height of the header and optional footer. fiddle : http://jsfiddle.net/GVPqP/1 div{min-height:50px;width:90%; border:1px...
Try this <!DOCTYPE html> <html> <style>span {text-decoration: none;display: inline-block;}</style> <body> <a href="#">underscored text <span>without underscore</span></a> </body></html> Link to original answer :...
The below solution is messy, so you are probably better off using an image. Based on this: How to create a triangle in CSS3 using border-radius #inner{ transform: rotate(45deg); -ms-transform:...
create two style templates, one that hides all but content 1, and other that hides all but content 2. Set both style blocks with ids (ex. id="printOne"), media="print" and with...
You can directly call the click function on the element. $("#d1").click(); // Switch ON The issue you will have is that the ID of the element changes so it will...
I put an example together that should suit your needs DEMO jsFiddle // this gets all h4 tags var myList = document.getElementsByTagName("h4"); // get all p elements // this loops...
How can I vertically align all the "li" elements at the very bottom of "menu-main-menu" rather than at the top? I don’t think vertical-align can be applied here. But...
If you absolutely can't make your index a php file. Then, you can always make an ajax request to get the header and footer. However, it is very simple to...