마지막 이미지의 크기가 다른 클래스의 이미지와 다른 경우

"학교"에서 두 번째 이미지의 크기가 내 웹 사이트의 다른 이미지와 다릅니다. 어떻게 이미지의 크기를 조정합니까?마지막 이미지의 크기가 다른 클래스의 이미지와 다른 경우

JSFIDDLE : http://jsfiddle.net/54k90fof/

(상단에 엉망 배너를 무시 그건 내 브라우저에서 다른 보이지만 그것은 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); 

}

출처

2015-01-08 RoseHaggar

문제는 이미지의 크기가 너무 다르다는 것입니다. 코드와 관련이 없습니다. – jmore009

변경 최대 높이 : 100px에서 간단하게 높이 : 100px 그렇지 않으면 그러나 이미 폭 이미지 비율 스트레칭되어, 높이 비율을 같은 폭의 이미지를 모두 업로드 : 김 100 % ...

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

출처

2015-01-08 03:53:01 Nickfmc

원래 이미지 비율을 유지하려면 가장 좋은 방법은 이미지를 잘라내거나 동일한 비율로 채우기 위해 서버 측 기술을 사용해야합니다. 예를 들어, nginx는 이미지 모듈을 가지고 있으며 PHP에서 많은 라이브러리가 있습니다.

그렇지 않으면 이미지 태그에서 고정 높이와 검은 색 배경색 래퍼 div를 추가하고 이미지의 세로 맞춤을 중간으로 설정할 수 있습니다.

출처

2015-01-08 06:54:30 Phoenix

마지막 이미지의 크기가 다른 클래스의 이미지와 다른 경우

답변

관련 문제