javascript를 사용하지 않고 div에 이미지를 맞추는 방법

자바 스크립트를 사용하지 않고 이미지를 펼치지 않고 div에 맞게 이미지를 만들고 싶습니다. CSS 전환을 사용할 때 배경 이미지 속성을 사용할 수 없습니다. 사용하기javascript를 사용하지 않고 div에 이미지를 맞추는 방법

max-height:100%; 
max-width:100%;

이미지가 너무 작을 때를 제외하고는 내가하고 싶은 것입니다. 나는 너비를 유지하면서 최대 높이와 최대 너비를 적용하면서 특정 높이로 이미지를 확대하는 것을 고려해 보았습니다. 그러나 이것은 전혀 작동하지 않으면 매우 고질적이며 시간이 소요되는 솔루션처럼 보입니다. 다른 제안이 있습니까? 블록으로

감사

Kabeer는

출처

2014-11-12 kabeersvohra

뭔가 (도움이 될 것이라고 생각 http://jsfiddle.net/1t4tzjbx/1 /) – Benjamin

요소를 사용해야합니까, 아니면 배경 이미지 일 수 있습니까? 가능한 모든 시나리오에서 스트레치가 어떻게 작동하는지 설명해 주시겠습니까? – fcalderan

Benjamin의 답변은 배경이나 jscript를 사용하지 않고 가장 정확합니다. 일부 요소, div, 링크 또는 이미지의 너비/높이를 설정해야합니다. –

표시 이미지와는 용기에 이미지를 포장 부모 컨테이너

에 적합하고 그 안에있는 이미지에 대한이 스타일을 설정합니다 :

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

그래서 스트레칭되지 않습니다.

here you have a fiddle
This fiddle는

출처

2014-11-12 11:54:54 Mephiztopheles

좋은 해결책 그러나 didnt는 그것을 나를 위해 일한다 – kabeersvohra

당신은 그 다음 나를 위해 약간의 코드를 가지고있다, 그래서 나는 당신의 특정한 일을 점검 할 수 있냐? – Mephiztopheles

내 변경 사항을 보았습니까? – Mephiztopheles

당신은 이미지가 부모 div

<div class="img-frame"> 
    <img src="http://placekitten.com/g/200/300"/> 
</div>

CSS의 height 및 width을 상속합니다 다음과 같은 방법을 시도 할 수 있습니다 컨테이너보다 작은 이미지입니다

.img-frame{ 
    width: 500px; 
    height: 500px; 
    overflow: hidden; 
} 
a img{ 
    width : 100%; 
    height: auto; 
}

Working Fiddle

출처

2014-11-12 11:59:01 Benjamin

내가이 솔루션과 함께 찾는 문제는 그 이미지가 세로가 있다면 그 뻗어있다. 어떻게 든 이미지가 풍경인지 감지하고 높이를 수행하기를 원합니다 : 이미지가 자바 스크립트가없는 경우 이미지가 100 % 인 경우 – kabeersvohra

좋아, 원래 질문에서 벗어난 해킹 된 솔루션을 사용해야하므로 더 나은 솔루션이없는 것으로 보입니다. 미래의 사람들에게 이것은 내가 한 일이다. 컨테이너가 400px라고 말할 수 있습니다. 이 CSS를 이미지에 적용하십시오 :

height:400px; //set it to whatever the container height is 
width:auto; 
max-width:100%; 
max-height:100%;

이 솔루션을 사용하면 이미지 크기를 컨테이너 크기로 조정할 수 있습니다. 그런 다음 새로 조정 된 이미지를 확인하고 최대 높이를 100 %로 설정하여 400px로 유지합니다. 그런 다음 최대 너비를 100 %로 설정합니다. 이미지를 가로로 배치하면 세로 이미지의 경우 아무 것도 수행하지 않습니다. 그러면 너비가 컨테이너 너비로 설정되어 작동합니다. 또한 사용 후 이미지를 중앙에 : 나는 내 자신의 질문에 대답을 끼쳐 드려 죄송

margin:auto;

을하지만 난 그게 미래의 사람들을 위해 [이]와 같은

출처

2014-11-12 12:41:20 kabeersvohra

javascript를 사용하지 않고 div에 이미지를 맞추는 방법

답변

관련 문제