유체 이미지 가로 세로 비율을 바꾼다

Question

나는 CSS, 으로 6 개의 이미지를 나란히 놓으려고하고있다. 모든 것이 거의 대부분의 디스플레이에서 잘 확장 될 수 있어야한다. (잠시 동안 모바일을 제외하고) 그래서 나는 ' 만든 적이이 : http://pelloponisos.telesto.gr/galleryTest/test/gallery.php# (분명히 내가 만들려고 노력하고있어 또 다른 회전 목마)

내가 그들을 크기를 조절할 때 그래서 난 그냥 폭을 넣어 내 이미지의 대부분이 높이보다 더 큰 폭 : X % 리 용기에 이미지 너비는 100 %입니다.

하지만 여섯 번째 이미지가 다르며 많은 문제가 발생합니다. 높이 설정을 시도했지만 두 이미지 중 하나를 기준으로 이미지의 크기를 조정할 수만 있습니다.

유일한 효과는 정적 높이를 ul에 넣고 너비와 높이를 모두 조절했지만 유체 격자가 아닙니다.

모든 li 요소에 유체 높이가 있고 그런 다음이를 기반으로 모든 이미지의 크기를 조절할 수있는 방법은 무엇입니까? 또는 그렇지 않다면 CSS에서 지정한 것과 다른 비율로 이미지를 만들 수있는 방법이 있습니까?

Answer 1

코드를 약간 삭제했지만 아이디어에 더 가깝게 보입니다. 트릭은 컨테이너의 너비 (.upper ul li)를 설정 한 다음 이미지를 사용하는 것입니다. max-width : 100 %; 높이 : 자동. 또한 패딩이 %로 변경되었습니다.

  #carousel{ 
      position:relative; 
      } 
      #wrapper{ 
      margin:0 auto; 
      } 

      #slides{ 
      width: 100%; 
      } 
      .upper ul li{ 
      width: 200px; 
      max-width: 100%; 
      list-style:none outside none; 
      float:left; 
      padding-bottom:5px; 
      padding:2%; 
      } 
      img.galleryThumbnail{ 
      max-width:100%; 
      height:auto; 
      } 
      .info{ 
      display:none; 
      } 

      #buttons img{ 
      position:absolute; 
      top:90px; 
      } 
      #buttons #prev img{ 
      position:absolute; 
      left:29px;} 
      #buttons #next img{ 
      position:absolute; 
      right:21px; 
      }