div 주위를 감싸거나 유체 위에 배치 절대 위치 이미지

Question

안녕하세요 - 절대 위치 지정된 유체 너비/높이 이미지 주위에 div를 배치하거나 배치 할 수있는 방법을 알고 있습니다. 나는 그것을 이해할 수 없다.

감사 B.

<div class="wrap"> 
<img src="http://placekitten.com/g/500/500"/> 
</div> 

와 ...는

img{ 
position:absolute; 
top:0; bottom:0; left:0; right:0; 
max-width:100%; 
max-height:100%; 
margin:auto; 
} 

.wrap{ 
border:5px solid red; 
display:block; 
} 

여기입니다 : 어쩌면 이미지가 절대적으로 내부에 배치됩니다이 http://jsfiddle.net/20owLkxy/2/

같은 일을 http://jsfiddle.net/20owLkxy/1/

Answer 1

상대 위치로 랩합니다. 당신이해야 할 다른 것은

*{ 
    margin: 0px; 
} 
body, html{ 
    height: 100%; 
} 
img{ 
    position:absolute; 
    top:0; bottom:0; left:0; right:0; 
    max-width:100%; 
    max-height:100%; 
    margin:auto; 
    } 

.wrap{ 
    width: 100%; 
    height: 100%; 
    border:5px solid red; 
    display:block; 
    position: relative; 
    } 

랩 폭과 높이를 :) 제공하는 것입니다 그리고 당신은 유체 이미지를 원한다면 당신은 절대 위치 할 필요가 없습니다. 어떤 css가 트릭을 할 것입니다.

예 http://jsfiddle.net/20owLkxy/4/

* { 
    margin: 0px; 
} 
body, html { 
    height: 100%; 
} 
img { 
    max-width:100%; 
    height:auto; 
    display:block; 
    margin-left:auto; 
    margin-right:auto; 
} 
.wrap { 
    width: 100%; 
    height: auto; 
    border:5px solid red; 
    display:block; 
    position: relative; 
} 

Answer 2

당신이 그것을 position:absolute을 줄 필요가 없습니다, 나는 그것을 만든

http://jsfiddle.net/20owLkxy/6/

를 공유 한 바이올린을 참조하십시오 다음 이미지가 유체 확인하려면 당신이 창 크기를 조정할 때처럼 유체는 바이올린에서 결과를 볼 수 있습니다.

Answer 3

div가 있어야합니까? 테두리 만 있으면 div를 완전히 제거하고 이미지에 테두리를 설정하십시오.

Answer 4

하나의 해결책은 DIV 배경 이미지를 사용하는 것입니다

<div class="image"></div> 

... 여기

div.image { 
content:url(http://placekitten.com/g/300/300); 
float:left; 
} 

div.image{ 
display:inline; 
background:red; 
border:5px solid green; 
position:absolute; 
top:0; bottom:0; left:0; right:0; 
max-width:100%; 
max-height:100%; 
margin:auto; 
} 

는 jsfiddle입니다 - http://jsfiddle.net/2z2osu7r/