반응 형 이미지 문제

다음과 같은 제약 조건이 있습니다. 이미지의 원래 종횡비가 항상 유지되어야합니다. 상위 컨테이너의 너비가 너무 작 으면 이미지 크기에 맞게 크기를 조정하십시오. 이미지의 최대 높이는 400 픽셀입니다. 이미지의 최대 폭은 상위 컨테이너의 너비입니다. 문제 : 이미지가 부모의 너비로 제한 될 때 종횡비를 유지하지 않습니다. 여기에 CSS 나는이된다반응 형 이미지 문제

img.myImage { 
    width:auto; 
    height:auto; 
    max-width:100%; 
    max-height:400px; 
}

편집 :

div.programContainer { width: 100%; max-width: 1300px; padding: 10px; text-align: left; display: inline-flex; flex-wrap: wrap; justify-content: space-around; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

편집 : 솔루션 :가 어려움에 추가하려면 상위 구성 요소입니다 죄송합니다, 현재는 아무 관련이 없습니다 부모 컨테이너에서 불필요한 플렉스 박스를 제거하면 이미지 자체로 문제를 해결할 수 있습니다.

출처

2016-08-30 Daniel Williams

: 100 % 모든 시간을. 이거 해봤 니? –

너비가 100 %이면 이미지가 가로로 늘어나고 가로 세로 비가 위로 나옵니다. –

@EdangJeorlie가 말했듯이 브라우저 크기를 조정할 때 이미지의 크기를 조정하려면 width: 100%가 필요합니다. JSBin에 대한 예제는 here입니다.

헤드 업과 마찬가지로, 기본 설정대로 height: auto을 제거 할 수 있다고 생각합니다. 희망이 도움이!

출처

2016-08-30 02:18:33

픽셀 단위로 최대 너비를 지정하지 않고이 작업을 수행해야합니다. 원본 이미지의 폭은 이미지마다 다를 수 있습니다. 너비는 자동으로 계산되어야합니다. –

@DanielWilliams : 지금 정렬했다고 생각하는 것이 맞습니까? –

예, 제 자신의 문제를 해결했습니다. 내 원본 코드가 정확했습니다. –

이 같은 CSS를 사용할 수 있습니다 : 나는 폭을 사용하고

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

<img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" alt="Rafique">

출처

2017-07-31 09:54:12

반응 형 이미지 문제

답변

관련 문제