最后一张图片与 class 中的其他图片大小不同

Question

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

（忽略顶部乱七八糟的横幅。它在我的浏览器中看起来不一样，但在 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);

}

Answer 1

将 max-height:100px 更改为 height:100px。或者以相同的宽高比上传图片，但是你已经在拉伸图片比例 width:100% soo...

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

Answer 2

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

中有很多库

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

最后一张图片与 class 中的其他图片大小不同

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

html

css

image

sizing