특정 축소판 너비/높이 안에 맞게 이미지의 크기를 조정하려면 어떻게해야합니까?

Question

기본 이미지 미리보기 상자를 만들려고합니다. 왼쪽에는 큰 이미지가 표시되고 오른쪽에는 미리보기 이미지로 작은 이미지 세트가 표시됩니다.

미리보기 이미지가 일정한 너비/높이를 초과하지 않아야 즐거움을보기 위해 깔끔하게 정리할 수 있습니다.

내가 시도한 것 : 최대 너비와 최대 높이에 대해 배웠습니다 ... 아래 코드에서 볼 수 있듯이 두 가지를 모두 시도했지만 최대 높이와 ​​너비를 구체적으로 설정 했음에도 불구하고 여전히 확장되어 있습니다. 미리보기 이미지를 어색하게 만듭니다.

내가 뭘 잘못하고 있니?

미리 감사드립니다.

문제 :

http://puu.sh/2VfR6.png

html로 :

<div class="pictureBoxContainer"> 
    <div class="pictureBox"> 
     <div class="pBoxLeftColumn"> 
      <?php 
       echo "<div class='pBoxLargeImageContainer'>"; 
       echo "<img src='$pictureLinks[0]' alt='Primary Image' class='pBoxLargeImage'>"; 
       echo "</div>"; 
      ?> 
     </div> 
     <div class="pBoxRightColumn"> 
      <?php 
      foreach ($pictureLinks as $picture) 
      { 
       echo "<div class='pBoxThumbnailContainer'>"; 
       echo "<img src='$picture' alt='Thumbnail' class='pBoxThumbnail'>"; 
       echo "</div>"; 
      } 
      ?> 
     </div> 
    </div> 
</div> 

CSS의 : 당신은 잘못된 요소에 max-width 및 max-height을 설정 한

.pictureBoxContainer { 
    margin-top: 300px; 
    padding: 12px; 
    clear:left; 
    clear:right; 
    width: 100%; 
    background-color: #F7D961; 
    border-radius: 12px; 
    max-height: 600px; 
} 

.pictureBox { 
    background-color: #FFF; 
    border-radius: 12px; 
    width: 97%; 
    overflow: auto; 
    padding: 12px; 
} 

.pBoxLeftColumn { 
    display: block; 
    float: left; 
    min-width: 49.99%; 
    max-width: 49.99%; 
    overflow: auto; 
} 

.pBoxRightColumn { 
    display: block; 
    float: right; 
    min-width: 49.99%; 
    max-width: 49.99%; 
    overflow: auto; 
} 

.pBoxSmallImageContainer { 
    max-height: 20%; 
    max-width: 20%; 
    float: left; 
    padding: 3px; 
    margin: 3px; 
    background-color: #F7D961; 
    border-radius: 2px; 
} 

.pBoxSmallImage { 
    padding-top: 2px; 
} 

.pBoxLargeImageContainer { 
    width: 100%; 
} 

.pBoxLargeImage { 
    border-radius: 6px; 
    min-width: 450px; 
} 

Answer 1

. 대신 .pBoxThumbnail에 설정하십시오.