Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I force an image to fill its table cell COMPLETELY

I have read through many forums and tried the solution there but none of them have worked I still have a small gap between all my images. Here is the code:

<table id="Table">
            <tr>
                <td id="td1"><h2>~ Curling ~</h2></td>
                <td id="td2" rowspan="2"><img src="../images/curlingMid.jpg" 
                width="100%" height="100%" border="2" alt=""/></td>
                <td id="td1"><h2>~ Curling ~</h2></td>
            </tr>
</table>


#td1 { width: 32%;vertical-align: text-top; }
#td2 { padding-right: 5px; padding-top: 5px; }
like image 210
Stothertk Avatar asked May 30 '13 16:05

Stothertk


People also ask

How do you make an image fill the cell?

Right-click on the picture and select Format Picture. In the Format Picture pane, select Size & Properties and with the options in Properties, select 'Move and size with cells'.

How do I make an image occupy a whole div?

To auto-resize an image or a video to fit in a div container use object-fit property. It is used to specify how an image or video fits in the container. object-fit property: This property is used to specify how an image or video resize and fit the container.


2 Answers

The image is an inline element and has some white space below it because of how it is aligned with the baseline.

To fix it, try:

#td2 img {display: block;}

or

#td2 img {vertical-align: bottom;}

Fiddle demo: http://jsfiddle.net/audetwebdesign/WxrvC/

Note that you have set 5px padding to the top and right of the image, and I assumed that is for styling purposes.

Also, id attributes should be unique on a page, use class, much easier to maintain and allows for easier re-use of CSS rules.

like image 197
Marc Audet Avatar answered Sep 21 '22 19:09

Marc Audet


different browsers render html elements with different default padding/margins/spacing etc.. you can try reset these like this:

#table td {padding: 0px; margin: 0px;}
#table {border-spacing: 0px;}
like image 30
dshu610 Avatar answered Sep 22 '22 19:09

dshu610