큰 이미지를 작은 div에 센터하기

Question

내 목표는 내 div에서 더 큰 이미지를 중심에 배치하는 것입니다. 이미지의 크기를 조정하고 싶지 않습니다. 이미지의 가운데가 표시되어야합니다.

내 사업부는 다음과 같이 정의된다

:

div.thumbnail 
{ 
    display: block; 
    margin: auto; 
    height: 100px; 
    width: 100px; 
    overflow: hidden; 
} 

그리고 내 생각은 이미지의 추가로이 만드는 것이었다 :

이

div.thumbnail img 
{ 
    overflow: hidden; 
    margin: auto; 
} 

html로 보이는 같은 :

<div class="thumbnail"> 
    <a href="{{ url_for('showphotos') }}?key={{ album['AlbumName'] }}"> 
     <img src="{{ url_for ('static', filename=album['ThumbPath']) }}"> 
    </a> 
</div> 

그러나 이것은 나를 위해 작동하지 않습니다. 이 문제를 해결하는 방법에 대한 조언이 있으십니까?

감사 Darrell.

Answer 1

트릭입니다. 이미지를 수평 가운데에 놓기 쉽습니다. 그러나 수직 센터링은 그렇게 쉬운 것이 아니며 더 많은 마크 업을 필요로합니다. 배경 위치 속성을 사용할 수 있습니다. 여기 http://jsfiddle.net/krasimir/ydzZN/2/

HTML

<div class="thumbnail"> 
    <a href="#" style="background-image: url('http://www.australia.com/contentimages/about-landscapes-nature.jpg')"> 
    </a> 
</div> 

CSS

div.thumbnail { 
    display: block; 
    margin: auto; 
    height: 100px; 
    width: 100px; 
    overflow: hidden; 
    position: relative; 
} 
div.thumbnail a { 
    display: block; 
    width: 100%; 
    height: 100%; 
    background-position: center center; 
} 

물론 나쁜 효과가있다 jsfiddle입니다. 귀하의 이미지는 CSS 스타일이기 때문에 색인이 생성되지 않습니다.

Answer 2

이미지의 가로 가운데 맞춤은 직선적이어야하지만 페이지 요소를 세로로 가운데 맞춤하는 것은 쉽지 않습니다. 더 깔끔한 솔루션은 이미지를 div (또는 아마도 앵커 태그)의 background-image으로 설정하고 다른 CSS 배경 속성을 사용하여 위치를 지정하는 것입니다. 다음과 같이 입력하십시오 : style="background-image: url([url]); background-position: center"이 작업을 수행해야합니다.

Answer 3

이것은 내가 아는 가장 쉬운 해결책입니다. 여러분이하려는 일을하기 위해서는 두 개의 div가 필요합니다. 과 같이 : 우리는 우리가 원하는 어떤 크기로이 경우 썸네일 내부 사업부 숨겨진 오버 플로우를함으로써 썸네일 사업부를 설정

<div class="thumbnail"> 
     <div class="image-container"> 
     <a href="{{ url_for('showphotos') }}?key={{ album['AlbumName'] }}"> 
      <img src="{{ url_for ('static', filename=album['ThumbPath']) }}"> 
     </a> 
     </div> 
    </div> 

CSS

.thumbnail{ 
    width: 100px; 
    height:100px; 
    overflow:hidden; 
    } 
    .image-container{ 
    width: 100%; 
    height: 100%; 
    //use the margin property to position the image in the div. 
    margin: 0 0 0 0; 
    } 

우리의 이미지를 전체 크기 만 잘립니다 우리가 보여주고 자하는 이미지의 어떤 지점으로.

Answer 4

div 크기의 여러 이미지를 가운데에 배치하려면 이미지를 CSS의 div의 배경 (가운데)으로 설정하십시오 (예 : img 요소 필요 없음). 그런 다음 div의 고정 너비를 설정하고 오버플로를 숨 깁니다.

<div class="s1"> [ Content ] </div> 
<div class="s2"> [ Content ] </div> 
<div class="s3"> [ Content ] </div> 

div{ 
    width:300px; 
    height:300px; 
    overflow:hidden; 
} 
.s1{ 
    background:transparent url("http://placehold.it/500x500") center center no-repeat; 
} 
.s2{ 
    background:transparent url("http://placehold.it/700x500") center center no-repeat; 
} 
.s3{ 
    background:transparent url("http://placehold.it/500x700") center center no-repeat; 
} 

http://jsfiddle.net/daCrosby/sYgHG/1/