CODEWITHSUNDEEP
htmlcssimageresize
almightyAEO
almightyAEO

Reputation: 13

strange image resize issue

I can't get the top image to fit into the div. I've tried looking at other questions on this site but none really answer this question. I have set it to 100% for each of the image sizes but they still wont lock into the divs they are in.

.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%;     
}

Upvotes: 1

Views: 60

Answers (3)

Joshua Dannemann
Joshua Dannemann

Reputation: 2080

It looks to me like you are either missing a class definition for "image" on the div tag, or you typo'd its name because you have a class definition for "r-image", but not "image". In any case, you might have a little less frustration if you took out the image tag and opted to make it a CSS background image for the container div. Then you have a few more options for how you would like it sized.

Upvotes: 0

Joy Biswas
Joy Biswas

Reputation: 6527

When you say float it gets out of the wrap, removed float and Image is inside your div.

Refer snippet

@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>

Upvotes: 0

Rachel Gallen
Rachel Gallen

Reputation: 28583

display your events article inline-block instead of inline et voila!

fiddle

Upvotes: 1

Related Questions