Question

我有一个非常简单的页面，带有div。在div内部是一个位于div顶部的图像，位于图像下方的一些文本。

我的问题：图像的宽度应该等于div的宽度，即图像应该拉伸到div的宽度。但是，所发生的是图像仅延伸了div宽度的80％左右，因此图像右侧有一个间隙。

如何让图像一直向右拉伸，使其宽度与div宽度相同？我想你可以在JSFiddle中看到我的问题（包括上传的图片）：http://jsfiddle.net/ajEmm/ 但我也鼓励你在IE中显示HTML，图片是一个链接，所以它会显示。

注意：此问题仅发生在IE中，在firefox中图像正确延伸到div的宽度

<html>
<head>
    <style type="text/css">
    <!--
        body        { background-color: RGB(218,238,248); }

        .content      { padding-top: 2%; margin: 10px; margin-top: 0; width: 58%;
                        max-width: 58%; float: left; color: #454545; }

        #announcement { margin: 5%; margin-top: 0%; margin-bottom: 5%; border-color: #99CCFF;
                        border-width:thin; border-style:solid; border-right-width:thick;
                        border-top-width:0px; border-bottom-width:thick; background-color: #FFFFFF; }
    -->
    </style>
</head>
<body>

    <div class="content">
        <div id="announcement">
            <img class="anncHeading" src="http://i54.tinypic.com/qs1lsg.png" width="100%" height="60%" alt="1"/>
            <p><b>Announcements</b></p>
            <p>Planning on hosting an indoor/outdoor event? We have large, modern educational facilities & surounding gardens available for hire & lease at an economical rate.</p>
        </div>
    </div>

</body>
</html>

Answer 1

哇，哇哇。

请以结构化，易于理解的格式编写。从长远来看，它会帮助你学习代码（无论是css，php，js等......）
您的代码格式不佳。我更新了你的小提琴：http://jsfiddle.net/ajEmm/3/（插入HTML框中的所有内容，这样你就可以将其复制并粘贴到你的页面文件中）
由于某些用户具有大量屏幕分辨率，width: 58%;可能非常大。使用像这样的基于百分比的宽度是很好的做法，但通常保留用于站点容器和核心元素。 在流体布局中使用图像时，必须采取特殊预防措施（以避免翘曲等）。在您的特定情况下，您拥有的图像对于您拥有的代码来说并不理想。我建议两件事之一：
1. 将容器宽度设置为450px，即图像的宽度;或者，
2. 重写页面的工作方式，并使用一个没有文字的非常长的标题图片。如果你想这样做，我可以帮助你。让我知道，我会为你做一个小提琴并写下你的指示。 :)

图像的宽度不会增长到等于父div的宽度

1 个答案: