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; }
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'.
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.
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.
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;}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With