반응 형 컨테이너의 반응 이미지?

이 Responsive Image 또는 내포 된 이미지가 중첩 된 부모에게 적합하도록하려면 어떻게해야합니까?반응 형 컨테이너의 반응 이미지?

적절한 CSS를 적용했지만 HTML에서 폭이나 높이를 정의하지 않았습니다. 여기 내 CSS가있다.

.header { 
    height: 25%; 
    width: 95%; 
    padding: 2.5%; 
    background: #fff; 
} 
.header img { 
    max-width: 100%; 
    height: auto; 
}

당신은 여기에 문제가 볼 수 있습니다 http://www.client.noxinnovations.com/jensenblair/

큰 원형 이미지를? 그것은 Responsive (반응 형)가되어야합니다.

감사합니다.

내가 여기서 뭔가를 놓치고 만 설정 될 수 있습니다 : 이미지의

height:100%;

나를 위해 작동 ...

2012-09-19 22:09:42 Alan

멋진 @Alan입니다. 고맙습니다. 하지만 왜? 나는 호기심이 많다. –

100 %는 이미지 높이가 컨테이너 높이의 100 %가되어야한다고 말합니다. 컨테이너는 뷰포트 높이의 백분율로 정의되므로 크기가 조정되므로 이미지도 배율 조정됩니다. – Alan

굉장한 앨런! 정말 고맙습니다. 말된다 ;). –

는이 같은 폭을 최대 폭을 변경하기 만하면됩니다 :

.header img { 
    width: 100%; 
    height: auto; 
}

2014-03-07 23:17:55

나는이 오래된 질문 알아요,하지만 만약 당신이 aplly

디스플레이 : 플렉스;

부모에게 블록 유형의 모든 요소는 부모 요소의 최대 너비를 갖습니다.

2015-09-16 11:10:54

답변