응답자인 : 동적 높이

Question

나는 대답하는 레이아웃 예제로 다음 페이지를 가지고 :

flexible Grid 지금 내가이 페이지의 이미지와 같은 동일한 작업을 수행하기 위해 내 자신의 프로젝트를합니다. 화면 크기가 감소함에 따라 요소의 크기가 조정되어야합니다.

이러한 요소의 너비는 모두 정상적으로 작동합니다. 그러나 그들의 신장은 변하지 않을 것입니다. 예제 페이지의 작성자가 자신의 이미지에 단일 높이 특성을 사용하지 않았으므로 어떻게이 작업을 수행했는지 궁금합니다. 여기

내 코드입니다 :

• HTML

  <div id="wrapper"> 
  <ol> 
      <li id="el-1" class="figure"><div class="element"><p class="heading">Lorem1</p></div></li> 
      <li id="el-2" class="figure"><div class="element"><p class="heading">Lorem2</p></div></li> 
      <li id="el-3" class="figure"><div class="element"><p class="heading">Lorem3</p></div></li> 
      <li id="el-4" class="figure"><div class="element"><p class="heading">Lorem4</p></div></li> 
      <li id="el-5" class="figure"><div class="element"><p class="heading">Lorem5</p></div></li> 
      <li id="el-logo" class="figure"><div class="background"><p>LoremIpsum<br>Lorem</p></div></li> 
      <li id="el-6" class="figure"><div class="element"><p class="heading">Lorem6</p></div></li> 
      <li id="el-7" class="figure"><div class="element"><p class="heading">Lorem7</p></div></li> 
      <li id="el-8" class="figure"><div class="element"><p class="heading">Lorem8</p></div></li> 
      <li id="el-9" class="figure"><div class="element"><p class="heading">Lorem9</p></div></li> 
      <li id="el-10" class="figure"><div class="element"><p class="heading">Lorem10</p></div></li> 
  </ol> 
  

• CSS

http://nopaste.info/d8a051e767.html

Answer 1

예제 페이지가 아닌 동안 이미지를 사용하고 있습니다. 그런 다음이를 예제로 사용할 수 없습니다. 귀하의 사업부에 높이를 설정하지 않으면 콘텐츠가 적합 해 지도록 성장할 것입니다. 그래서, 그들이 테이블을 사용하거나 자바 스크립트를 사용할 수 있습니다 함께 크기를 조정하기 위해 (예를 들어 일치하는 열을 확인)

Answer 2

그것

전 사이트 flexible.html 라인

img { 
    max-width: 100%; 
} 

63

이미지를 포함하는 A 너비로 이미지를 만들고 이미지를 자동으로 올바르게 조정합니다.

다른 요소는 없으므로 이미지로만이 작업을 수행 할 수 있습니다.