div가있는 반응 형 이미지 서라운드

Question

div의 가운데에 이미지를 배치하고 div가 창의 크기에 따라 커지고 축소 될 수 있으며 이미지의 크기가 달라 절대 안됩니다. 주변 div보다 큽니다.

나는 다음과 같은 HTML을 사용하여이 작업을 수행하기 위해 관리해야 :

<div class="imgspace"> 
    <img src="/variable.jpeg"> 
</div> 

CSS :

.imgspace { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 

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

가 지금은 이미지에 대한 컨트롤의 간단한 세트를 구현하려는. 그들은 왼쪽, 아래쪽 및 오른쪽에있는 이미지를 둘러싸는 세 구역에 배치해야합니다. div는 뷰포트 크기 변경 및 실제 이미지 크기를 고려하여 변경 될 때마다 이미지가 커지고 축소되어야합니다.

CSS 만 사용하거나 자바 스크립트를 사용해야합니까?

여기에 시작 지점 jsfiddle이 있습니다. 나는 DOM의 배치가 나에게 중요하지 않기 때문에 의도적으로 세 개의 div를 빠져 나갔다.

Answer 1

왼쪽, 오른쪽 및 아래쪽 요소에 약간의 공간을 확보해야한다고 생각합니다.

예를 들어, 의 너비가 80 % 인 채로 #left 및 #right 요소에 대해 10 %를 예약합니다. 또한 #bottom 요소의 예약 된 10 % 높이.

바라기를 바라는 바는 다음과 같습니다. http://jsfiddle.net/6q4Ls/2/ 구분 기호를 드래그하여 요소 반응을 확인합니다.

---

컨테이너 외부 요소를 사용하여 또 다른 해결책은, 그 보인다 간단 : http://jsfiddle.net/6q4Ls/5/

---

편집 이 http://jsfiddle.net/6q4Ls/9/

이, 모든 브라우저에서 작업하지 않을 수 있습니다 고정 된 크기를 사용하여 I calc() 기능을 사용하고 있습니다.

div.imgspace img { 
    position: absolute; 
    margin: auto; 
    max-width: calc(100% - 200px); 
    max-height: calc(100% - 100px); 
    top: 0; right: 100px; bottom: 100px; left: 100px; 
}