图片的宽度不等于父div的宽度

Question

I have a really simple page, with a div. 我有一个非常简单的页面，带有div。 Inside that div is an image that sits at the top of the div some text that sits below the image. 在该div内是位于div顶部的图像，该图像下方是一些文本。

My Problem: The image is supposed to have a width equal to the divs width, ie, the image is supposed to stretch to the width of the div. 我的问题：该图像的宽度应等于divs的宽度，即该图像应拉伸到div的宽度。 But what happens is that the image stretches only about 80% of the width of the div, so theres a gap on the right side of the image. 但是发生的是图像仅拉伸了div宽度的大约80％，因此图像的右侧存在间隙。

How can I make the image stretch all the way to the right so its width is the same as the divs width? 如何使图像一直向右拉伸，使其宽度与div宽度相同？ I think you can see my problem in JSFiddle(complete with uploaded images): http://jsfiddle.net/ajEmm/ but I also encourage you to show the HTML in IE, the image is a link so it will show. 我认为您可以在JSFiddle中看到我的问题（带有已上传的图像）： http : //jsfiddle.net/ajEmm/， 但我也鼓励您在IE中显示HTML，该图像是一个链接，因此它将显示。

NOTE: This problem only occurs in IE, in firefox the image correctly stretches to the width of the div 注意：此问题仅发生在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

Woah, woah woah. 哇，哇，哇。

PLEASE write it in a structured, easy-to-digest format. 请以结构化，易于理解的格式编写它。 It will help you out in the long run as you learn code (whether it's css, php, js, etc...) 从长远来看，它将帮助您学习代码（无论是CSS，PHP，JS等等）。
Your code is formatted poorly. 您的代码格式不正确。 I updated your fiddle: http://jsfiddle.net/ajEmm/3/ (plugged everything in the HTML box so you can just copy and paste it into your page file) 我更新了您的小提琴： http : //jsfiddle.net/ajEmm/3/ （将所有内容插入HTML框中，以便您可以将其复制并粘贴到页面文件中）
Because some users have massive screen resolutions, width: 58%; 由于一些用户有巨大的屏幕分辨率， width: 58%; could be incredibly large . 可能很大。 Using a percentage-based width like that is good practice, but usually reserved for site containers and core elements. 像这样使用基于百分比的宽度是一种好习惯，但通常保留给站点容器和核心元素。 When using images in fluid layouts , special precautions must be taken (to avoid warping, etc). 在流体布局中使用图像时 ，必须采取特殊的预防措施（避免翘曲等）。 In your specific case, the image you have IS NOT IDEAL for the code you have. 在您的特定情况下，您拥有的图像对于您拥有的代码而言不是理想的。 I would suggest one of two things: 我建议两件事之一：
1. Set the container width at 450px , which is the width of your image; 将容器宽度设置为450px ，即图像的宽度； or, 要么，
2. Rewrite the way your page works, and use a really long header image without text. 重写页面的工作方式，并使用非常长的标题图像而不包含文本。 If you would like to do this, I'm available to help you. 如果您想这样做，我们将竭诚为您服务。 Let me know and I'll make a fiddle and write instructions for ya. 让我知道，我会摆弄小提琴并为您编写说明。 :) :)

图片的宽度不等于父div的宽度

问题描述

1 个解决方案

解决方案1
3 已采纳

图片的宽度不等于父div的宽度

问题描述

1 个解决方案

解决方案1 3 已采纳

解决方案1
3 已采纳