Clever Geek Handbook

Img doesn't show full table width

I am trying to put a banner image in the full header of <div>

this page .

So, for this I tried the following code:

<div class="content-wrapper">
    <table>
        <tr>
            <td><img src="Images/CA Banner_Final.jpg"/></td>
        </tr>
    </table>
</div>

But the image is only displayed in part <div>

. How can I fit it full width <div>

.

+3


source to share


2 answers


Why are you distorting the image in the table structure?

you can just put it in a .content-wrapper

div

Html

<div class="content-wrapper">
    <img src="http://idc.interlinktravels.com/lanka/Images/CA%20Banner_Final.jpg">
</div>

CSS

.content-wrapper img {
    width:100%
}


If you want to wrap a Div around the image inside the content wrapper, try the following script: https://jsfiddle.net/ejgt2syy/2/

Html

<div class="content-wrapper">
    <div class="banner">
        <img src="http://idc.interlinktravels.com/lanka/Images/CA%20Banner_Final.jpg">
    </div>
</div>

CSS

.banner img {
    width:100%
}
+2


source


Try it like this:

HTML:

<div class="content-wrapper">
    <img class="full_width" src="Images/CA Banner_Final.jpg">   
</div>


CSS

.full_width{
    width:100%;
}

no tables needed, so i removed this code

+2


source






More articles:


All Articles