이미지 최대 너비 사용 및 응답 높이 비율 유지

부트 스트랩을 사용하여 & 아래의 코드를 기반으로 이미지 및 제목이 각각 포함 된 .block 개의 구성 요소가있는 그리드 레이아웃이 있습니다. 이미지는 열 크기보다 커서 응답하는 화면 크기에 맞게 전체 너비로 크기를 조정할 수 있습니다 (아래 나열된 CSS로 완료). 각 이미지의 너비는 & 일 수 있습니다.이미지 최대 너비 사용 및 응답 높이 비율 유지

이것은 속성에서 이미지 높이를 정의하지 않는 한 올바르게 작동합니다. 높이를 추가하면 이미지 비율이 왜곡됩니다.

그러나 이제 제대로로드되도록 일부 자바 스크립트의 이미지 높이를 설정해야합니다. 높이를 설정하지 않으면 js가 너무 빨리로드되고 요소 높이가 기본적으로 올바르지 않습니다.

지금 당장은 setTimeout()을 사용하여 js 스크립트를 1.5 초 지연합니다. 이것은 분명히 느린 연결을 가진 사람에게는 충분하지 않을만큼 이상적이지 않습니다.

내 질문 : (A) 모든 이미지가 페이지에로드 될 때까지 js를 지연하거나 (B) 이미지 너비로 크기가 조정되는 방식으로 각 이미지의 높이를 설정하는 방법이 있습니까? 내 비율을 CSS로 이미지에 맞게 유지 하시겠습니까?

HTML :

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
      <div class="block"> 
       <img src="/img/image.jpg" alt="image"> 
       <h2>Image Title</h2> 
      </div> 
     </div> 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
      <div class="block"> 
       <img src="/img/image1.jpg" alt="image"> 
       <h2>Image Title</h2> 
      </div> 
     </div> 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
      <div class="block"> 
       <img src="/img/image2.jpg" alt="image"> 
       <h2>Image Title</h2> 
      </div> 
     </div> 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
      <div class="block"> 
       <img src="/img/image3.jpg" alt="image"> 
       <h2>Image Title</h2> 
      </div> 
     </div> 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
      <div class="block"> 
       <img src="/img/image4.jpg" alt="image"> 
       <h2>Image Title</h2> 
      </div> 
     </div> 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
      <div class="block"> 
       <img src="/img/image5.jpg" alt="image"> 
       <h2>Image Title</h2> 
      </div> 
     </div> 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
      <div class="block"> 
       <img src="/img/image6.jpg" alt="image"> 
       <h2>Image Title</h2> 
      </div> 
     </div> 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
      <div class="block"> 
       <img src="/img/image7.jpg" alt="image"> 
       <h2>Image Title</h2> 
      </div> 
     </div> 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
      <div class="block"> 
       <img src="/img/image8.jpg" alt="image"> 
       <h2>Image Title</h2> 
      </div> 
     </div> 
     <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
      <div class="block"> 
       <img src="/img/image9.jpg" alt="image"> 
       <h2>Image Title</h2> 
      </div> 
     </div> 
    </div> 
</div>

CSS :

.block img{ 
    max-width: 100%; 
}

출처

2014-12-21 TH1981

실행하는 JS을 지연하기 위해 모든 이미지는 jQuery의

$(window).load(function(){ 
     //your code here 
});

또는를 사용해야로드 될 때까지 이미지 크기를 조정할 수 있습니다. 의 각각은 같은 부하에 JS를 다시 실행합니다 브라우저에 크기 조정 그런 식으로 할

$(window).resize()

를 사용할 수있는 부트 스트랩을 확인

$('img').each($(this).load(function(){ 
    //resizing code here with $(this).height or $(this).width() maybe 
});

를로드 할 때. 이것이 내가 이미지로 반응을 테스트하는 방법입니다.

출처

2014-12-21 22:45:40 zardilior

이미지 최대 너비 사용 및 응답 높이 비율 유지

답변

관련 문제