div를 지정되지 않은 너비에 배치하는 방법은 무엇입니까?

다음은 HTML 내 코드입니다 :div를 지정되지 않은 너비에 배치하는 방법은 무엇입니까?

<!DOCTYPE html> 
<html lang="en"> 
    <head><link href="test.css" rel="stylesheet"></head> 
    <body> 
     <div class="outer"> 
      <div class="inner"> 
       <img src="test.png"> 
      </div> 
     </div> 
    </body> 
</html>

다음은 CSS의 :

.outer { 
    position: fixed; 
    top: 0; right: 0; bottom: 0; left: 0; 
} 

.inner { 
    width: auto; 
    margin: auto; 
} 

.inner > img { 
    width: auto; 
    max-width: 100%; 
}

이 내가 미리보기를 클릭 한 후 이미지를 표시하는 부트 스트랩의 modal.js 내부에서 사용하고있는 코드의 단순화이다.

내가 원하는 것은 이미지를 뷰포트의 중앙에 배치하는 것입니다. 즉, 뷰포트가 치수 중 하나보다 작지 않으면 이미지가 실제 치수로 표시됩니다. 그에 따라 이미지 크기가 조정되어야합니다.

outer div는 뷰포트의 정확한 크기를 갖는 경향이 있습니다. 이는 잘 작동합니다.

이미지에 width: auto; max-width: 100%;이 주어 지는데,이 이미지는 뷰포트의 너비에 매우 반응하지만 뷰포트의 높이에는 반응하지 않습니다. max-height: 100%;을 추가해도 아무런 변화가 없습니다.

불행히도 inner div는 특정 width이 지정되지 않은 한 뷰포트의 왼쪽을 포옹합니다.

.inner에 display: table을 추가하면 div가 가운데에 배치되지만 더 이상 뷰포트 너비의 변경에 응답하지 않습니다.

그래야 inner div를 중앙에 배치하고 이미지의 가로 세로 비율을 자르거나 변경하거나 이미지의 원래 크기를 벗어나는 방식으로 뷰포트의 너비와 높이에 반응하게하려면 어떻게해야합니까? ?

CSS와 HTML (및 부트 스트랩) 만 사용하는 것이 불가능하거나 맞춤 JS가 필요합니까? 나는 자신있게이 코드를 작성하기에 충분한 JS를 알지 못한다. 그래서 뷰포트 크기에 조건적인 모순적인 행동을 허용하는 몇 가지 CSS 속임수가 있기를 바란다.

부트 스트랩 컨텍스트에서 사용하기 때문에 트위터의 부트 스트랩에 태그를 지정하면 부트 스트랩 JS 플러그인을 사용하는 모든 솔루션을 환영합니다.

편집 : 더 명확하게하려면 inner의 이미지를 inner 내에 센터해야합니다.

출처

2014-06-12 Anonymous

시도의 텍스트 정렬 : 센터; – sarath

모든 것을 텍스트로 간주합니다 – sarath

당신은 가지고있는 것을 [JSFiddle] (http://jsfiddle.net)에 제공 할 수 있습니까? –

변경이

.outer { 
     position: fixed; 
     top: 0; right: 0; bottom: 0; left: 0; 
     text-align:center; 
    }

같은 코드

http://jsbin.com/puyabore/1/edit

출처

2014-06-12 04:57:15 sarath

일반적으로 너비에 따라 반응합니다 – sarath

이 문제는 '내부'를 중앙으로 이동하는 대신 '내부'를 뷰포트의 크기로 확대한다는 점에서 문제가 있습니다. 이것은 내부 div가 이미지 주위를 감쌀 필요가 있기 때문에 다른 문제를 일으 킵니다. –

여기 있습니다 : http://jsfiddle.net/J77Lr/8/ –

div를 지정되지 않은 너비에 배치하는 방법은 무엇입니까?

답변

관련 문제