Last image is not the same size as other images in that class

Question

Under "School" the second image isnt the same size as any of the other images on my website. How do i resize the image?

(ignore the messed up banner at the top. It looks different in my browser but it looks bad in JSfiddle)

HTML

<!DOCTYPE>
<HTML>

<head>
    <meta charset="UTF-8">
    <title> My Home Page</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>

    <div class="banner">   

        <h1> Welcome!<span style="color:#FF009D" class="dot">•‌</span><span style="color:#12E00B" class="dot">•‌</span><span style="color:#FF9D00" class="dot">•‌</span> 
        </h1>   

            <div class="Navi">
                    <nav>
                        <ul>
                            <li><a href="#">About me! </a> </li>
                            <li><a href="#">Email me  </a></li>
                            <li><a href="photos.html">Photography</a></li>
                        </ul>
                    </nav>
            </div>    
    </div>


     <p> Favorite Websites</p>

            <div class="wrap"> 
                <div class="wrap-in">
                    <div class="item">    
                        <a href="https://www.youtube.com/user/maxxchewning">
                            <img src="http://i.ytimg.com/vi/HrkZQ3EOmFQ/hqdefault.jpg"/>
                                <div class="button"></div>
                        </a>    
                    </div>

                    <div class="item">
                        <a href="https://www.youtube.com/user/Christianguzmanfitne">
                            <img src="http://i.ytimg.com/vi/zsD_7hkfEwY/hqdefault.jpg"/>
                            <div class="button"></div>
                        </a>         
                    </div>

                    <div class="item">
                        <a href="https://www.youtube.com/user/PhysiquesOfGreatness">
                            <img src="http://v017o.popscreen.com/VzFBeVBjMHhpRWMx_o_new-physiques-of-greatness-intro-25.jpg"/>
                            <div class="button"></div>
                        </a>     
                    </div>

                    <div class="item">    
                        <a href="https://www.reddit.com">
                            <img src="https://pbs.twimg.com/profile_images/459083822470946816/VGv0AGio.png"/>
                                <div class="button"></div>
                        </a>    
                   </div>
                   <div class="item">    
                        <a href="https://www.ebay.com">
                            <img src="https://pbs.twimg.com/profile_images/471350614132129793/NCDCFXva.jpeg"/>
                                <div class="button"></div>
                        </a>    
                   </div>
                    <div class="item">    
                        <a href="https://www.facebook.com">
                            <img src="https://pbs.twimg.com/profile_images/3513354941/24aaffa670e634a7da9a087bfa83abe6_400x400.png"/>
                                <div class="button"></div>
                        </a>    
                    </div> 
                </div>

            </div>
        <p> School </p>

            <div class="wrap"> 
                <div class="wrap-in">
                    <div class="item">    
                        <a href="https://www.howdy.tamu.edu">
                            <img src="http://www.ourgeeks.com/wp-content/uploads/2014/02/howdy.tamu_.edu_.jpg"/>
                                <div class="button"></div>
                        </a>    
                    </div>

                    <div class="item">    
                        <a href="https://www.ecampus.edu">
                            <img src="http://hdc.tamu.edu/files/150_199/191/002_login.jpg"/>
                                <div class="button"></div>
                        </a>    
                    </div> 
                </div>
            </div>


    <div class="footer"></footer>
</body>

</HTML>

CSS

body {       
        margin-top:-3px;
        min-width:1000px;
}

p { 
font-family: Futura;
font-size:20px;
margin-left:10px;
}

nav ul li {
    display:inline-block;
    font-size:10px;
    float:left;
    height:200px;
    width:100px;
}
.item{
    width: 156px;
}
.wrap{
    overflow: hidden;
    overflow-x: scroll;
    width: 960px;
}
.wrap-in{
    width: 2500px;

}
.banner {
    width:100%;
    height:200px;
    background-color: rgba(64, 201, 255, 1);
    margin-left:-10px;
}
.Navi { 
position: absolute; top: 0px; right: 90px;
background-color:rgba(64, 201, 255, 1);
height: 150px;
font-family: Futura;
font-size:10;

}
.Navi ul li a {
    text-decoration:none;
    color: white;

}

h1 { 
    font-size:80px;
    margin-left:30px;
    font-family:Futura;
    line-height:120px;
    color:rgba(255, 255, 255, 1);
    text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
    width:100%;
    letter-spacing:1px;
    padding-top:30px;

}


h1:hover { 
    font-size:80px;
    font-family:Futura;
    color: rgba(64, 201, 255,.8);
    text-shadow: 2px 2px 3px rgba(255, 255, 255,0.9);
    width:100%;
    padding-top:30px;
}

.wrap{ 
    margin-top:20px;
    width: 100%;
    background-color: rgba(255, 190, 77, 1);
    height:200px;
    margin-left:-10px;
    overflow:auto;
}


.item {
    float:left;

    padding:0px;
    margin-left: 40px;
    margin-top: 20px;


}

.item img {
    width:100%;
    padding-top:10px;
    max-height:100px;
    opacity:1;
}
.item img:hover {
    opacity:.4;
    -webkit-transform: scale(1.2);
    -moz-transform:    scale(1.2);
    -o-transform:      scale(1.2);
    -ms-transform:     scale(1.2);
}

.button {
    background-color:rgba(64, 201, 255,1);
    height:50px;
    width:100%;
    border-bottom-right-radius:.5em;
    border-bottom-left-radius:.5em;    
    transition: background-color 0.3s linear;     
}
.item:hover .button{
    background-color: rgba(255, 0, 157, 1);
    -webkit-transform: scale(1.2);
    -moz-transform:    scale(1.2);
    -o-transform:      scale(1.2);
    -ms-transform:     scale(1.2);

}

the issue is your images are too different sizes, it's not code related — jmore009, Jan 08 '15 at 04:24

score 0 · Accepted Answer · answered Jan 08 '15 at 03:53

change max-height:100px to simply height:100px. or else upload the images all in the same width to height ratio, however you are already stretching the image ratio with width:100% soo...

.item img {
    width: 100%;
    padding-top: 10px;
    height: 100px;
    opacity: 1;
}

score 0 · Answer 2 · answered Jan 08 '15 at 06:54

The best way if you want to keep the original image ratio, you should use some server side technology to crop or fill the image to the same ratio. eg, nginx has an image module can do this, and there're a lot libraries in php.

Otherwise, you can add a fixed height and black background-color wrapper div out of the image tag, set the images' vertical align to middle.

Last image is not the same size as other images in that class

2 Answers2