반응 형 이미지를 확장 높이와 동일하게 유지하려면 어떻게해야합니까?

현재 웹 사이트 프로젝트에서 부트 스트랩 3을 사용 중입니다. img-responsive를 사용하여 이미지를 반응 적으로 만드는 데 문제가 있습니다.반응 형 이미지를 확장 높이와 동일하게 유지하려면 어떻게해야합니까?

내가 원했던 것은 화면 크기가 변함에 따라 모두 동일한 높이와 크기의 컨테이너에 4 개의 이미지를 나란히 놓는 것입니다.

부트 스트랩 그리드 시스템에 따라 총 12 개의 열을 차지하는 이미지가 있습니다. 남은 4 = 맨 오른쪽 이미지

는

1 = 좌측의 화상 2 = 번째 이미지 3 = 세번째 이미지 - 3 COLS, 960x640 2 = 2 열 640x640 3 = 4 열, 1280x640 4 = 3 열, 960x640

HTML :

<div class="container"> 
<div class="row"> 
    <div class="col-md-3"> 
    <img class="responsive" src="/image/1.jpg" /> 
    </div> 
    <div class="col-md-2"> 
    <img class="responsive" src="/image/2.jpg" /> 
    </div> 
    <div class="col-md-4"> 
    <img class="responsive" src="/image/3.jpg" /> 
    </div> 
    <div class="col-md-3"> 
    <img class="responsive" src="/image/4.jpg" /> 
    </div> 
</div>

가 어떻게 그들이 확장으로 그들은 모두 같은 높이 있는지 확인합니까? 현재 모든 이미지는 단순히 클래스로 img-responsive를 가지며 최대 너비 100 %, 높이를 자동으로 설정하고 블록으로 표시합니다.

CSS : 그 폭이 다음 이미지에 의해 수축 할 때

.img-responsive { 
    display: block; 
    max-width: 100%; 
    height: auto; 
}

출처

2014-03-30 Zach Cook

는 u는 원본 이미지의 크기를 언급 할 수

<div class="col-md-2 no-pad"> <img ...

CSS? 아마도 다른 열 크기가 같은 높이의 이미지 너비에 비례하지 않습니다. 가장 좋은 방법은 비례 비율과 높이로 너비를 지정하는 것입니다. 이미지에 자동 –

@Sagi_Avinash_Varma 예 좋습니다. 이제 막 추가했습니다. 나는 그것이 실제로 문제가 될 것이라고 생각합니다 ... –

이 웹 사이트는 실제로 도움이됩니다. http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works –

다른 질문에 답변 할 때이 작업을 더 간단하게하는 방법 ... 사용자 정의 클래스를 추가하여 col-md- * 패딩을 무시하십시오. 미디어 쿼리가 필요하지 않습니다.

예 : http://www.bootply.com/utGXpeBgE2

HTML

.no-pad{ 
    padding-left:0px; 
    padding-right:0px; 
}

출처

2014-06-09 06:57:33

이미지가 전체 높이로 표시되지 않습니다. 이 문제를 해결하려면 position:absolute을 추가해야합니다. 그러나 그

@media(min-width:992px){ 
    .img-responsive{ 
     position:absolute; 
    } 
}

HTML

<div class="col-md-3"> 
    <img class="img-responsive" src="//placehold.it/960x640/eee"> 
    </div> 

    <div class="col-md-2"> 
    <img class="img-responsive" src="//placehold.it/640x640/ddd"> 
    </div> 

    <div class="col-md-4"> 
    <img class="img-responsive" src="//placehold.it/1280x640/eee"> 
    </div> 

    <div class="col-md-3"> 
    <img class="img-responsive" src="//placehold.it/960x640/ddd"> 
    </div>

하는 예를 참조 COL-MD 임계 값 (992px) 아래의 화면이 너무 만 @media 쿼리의 방법으로, 때 그 위에 추가 문제가 발생합니다 http://www.bootply.com/11BDvXAx9y

출처

2014-06-08 17:39:58

반응 형 이미지를 확장 높이와 동일하게 유지하려면 어떻게해야합니까?

답변

관련 문제