Under "School" the second image isnt the same size as any of the other images on my website. How do i resize the image?
JSFIDDLE: http://jsfiddle.net/54k90fof/
(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);
}
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;
}