Question

我正在尝试将横幅图片放在this page的完整标题<div>中。

为此，我尝试了以下代码：

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

但图像仅显示在<div>的一部分中。如何使其适合<div>的全宽。

Answer 1

试试这样：

HTML：

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

CSS：

.full_width{
    width:100%;
}

不需要表格，因此我删除了该代码

Answer 2

为什么要将图像包装到表格结构中？

您可以简单地将其放入.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%
}

如果你想在内容包装器中围绕图像使用包装器div，那么请尝试跟随小提琴：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%
}

Img没有显示表的全宽

2 个答案: