Html 最后一个图像的大小与该类中的其他图像不同

在学校里，第二张图片的大小与我网站上的任何其他图片都不一样。如何调整图像的大小

JSFIDDLE：

忽略顶部混乱的横幅。它在我的浏览器中看起来不同，但在JSFIDLE中看起来很糟糕

HTML

---

将最大高度：100px更改为简单高度：100px。或者上传的图像都在相同的宽高比，但你已经拉伸图像的宽度比：100%soo

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

---

如果要保持原始图像的比例，最好的方法是使用一些服务器端技术将图像裁剪或填充到相同的比例。例如，nginx有一个图像模块可以做到这一点，php中有很多库

---

否则，您可以在图像标记外添加一个固定高度和黑色背景颜色的包装div，将图像的垂直对齐设置为中间。

问题是您的图像大小太大，与代码无关

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);

}

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