奇怪的图像调整大小问题

Question

我无法将顶部图像放入 div。我试过查看此站点上的其他问题，但 none 确实回答了这个问题。我已将每个图像尺寸设置为 100%，但它们仍然不会锁定到它们所在的 div。

.html

<body>
<div class="container">
<div class="header">
    <div class="navbar">
    <ul>
    <li>HOME</li>
    <li>GALLERY</li>
    <li>EVENTS</li>
    <li>SHOP</li>
    <li>ABOUT</li>
    </ul>
    </div>
</div>
<div class="eventbar">
    <div class="events">
        <article>
            <div class="image"><img class="icono" src="http://placehold.it/120x120">
            </div>
            <div class="text">
            <h1 style="margin-bottom:-20px;">Event 1</h1>
            <p>this is this is placeholder text websites are fun and i like to make them. although they are freakin </p>
            </div>
        </article>
    </div>

<div class="newimages">
    <h1 class="imgtext">This is a catchy tagline</h1>
    <div><img class="r-image"src="http://placehold.it/800x400">
    </div>
    <p>this image is about yada yada and it was featured on yada yada. and now i would like to formally present it to you the aeophex family</p>
</div>

.css

@charset "utf-8";
/*sectionized*/
body{
    margin:0px;
    padding:0px;
    font-family:sans-serif}
.container{}

/*header*/
.header{
    background-color:#FFF;}
.aeologo{
    margin-bottom:-13px;
    margin-left:-8px;
    }
.navbar{
    margin-left:-50px;}
.navbar ul li{
    display:inline;
    padding-left:10px;}
/*header*/

/*events*/
.eventbar{
    padding-bottom: 12px;
    padding-top: 5px;
}
.events{
    background-color: #06F;
    padding-bottom: 19px;
    padding-top: 3px;
    }
.events article{
    padding:10px;
    display:inline;
    padding-bottom:5px;}
/*events*/

.newimages{}

/*elements*/
.r-image{
    padding:15px;
    min-width: 25%;
    max-width: 95%;
    width: 95%;
    }
.icono{
    float: left;
    padding: 2px inherit;
    padding-right: 10px;
    padding-left: 5px;
    max-width: 100%;
    min-width: 25%;     
}

Answer 1

显示您的活动文章 inline-block 而不是 inline 瞧！

fiddle

Answer 2

当你说浮动时，它会脱离包装，移除浮动，图像在你的 div 内。

参考片段

@charset "utf-8";
/*sectionized*/
body{
    margin:0px;
    padding:0px;
    font-family:sans-serif}
.container{}

/*header*/
.header{
    background-color:#FFF;}
.aeologo{
    margin-bottom:-13px;
    margin-left:-8px;
    }
.navbar{
    margin-left:-50px;}
.navbar ul li{
    display:inline;
    padding-left:10px;}
/*header*/

/*events*/
.eventbar{
    padding-bottom: 12px;
    padding-top: 5px;
}
.events{
    background-color: #06F;
    padding-bottom: 19px;
    padding-top: 3px;
    }
.events article{
    padding:10px;
    display:inline;
    padding-bottom:5px;}
/*events*/

.newimages{}

/*elements*/
.r-image{
    padding:15px;
    min-width: 25%;
    max-width: 95%;
    width: 95%;
    }
.icono{
    padding: 2px inherit;
    padding-right: 10px;
    padding-left: 5px;
    max-width: 100%;
    min-width: 5%;

}

<div class="container">
<div class="header">
    <div class="navbar">
    <ul>
    <li>HOME</li>
    <li>GALLERY</li>
    <li>EVENTS</li>
    <li>SHOP</li>
    <li>ABOUT</li>
    </ul>
    </div>
</div>
<div class="eventbar">
    <div class="events">
        <article>
            <div class="image"><img class="icono" src="http://placehold.it/120x120">
            </div>
            <div class="text">
            <h1 style="margin-bottom:-20px;">Event 1</h1>
            <p>this is this is placeholder text websites are fun and i like to make them. although they are freakin </p>
            </div>
        </article>
    </div>

<div class="newimages">
    <h1 class="imgtext">This is a catchy tagline</h1>
    <div><img class="r-image"src="http://placehold.it/800x400">
    </div>
    <p>this image is about yada yada and it was featured on yada yada. and now i would like to formally present it to you the aeophex family</p>
</div>

Answer 3

在我看来，您要么缺少 div 标签上 "image" 的 class 定义，要么您打错了它的名称，因为您有 class "r-image" 的定义，但不是 "image"。在任何情况下，如果您取出图像标签并选择将其设为容器 div 的 CSS 背景图像，您可能会少一些挫败感。然后你有更多的选择来决定它的大小。

奇怪的图像调整大小问题

strange image resize issue

html

css

resize

image