2013-03-15 6 views
-1

이미지의 너비를 제어하지 않고 이미지를 div에 가운데 놓으려고합니다. 이것은 관리자에 의해 업데이트 될 징하고 내가 컨트롤을 캔트 때문에div의 이미지를 가로로 모으지 않고 가운데에 맞 춥니 다.

http://citylightsrealtygroup.com/

: 당신은 여기에 기능 목록의 예를 볼 수 있습니다. 코드는 아직이 모양의 중심으로되지는 여전히 왼쪽 가장자리에 줄 지어 :

.feature_thumb img{ 
    width:auto; 
    height:100%; 
    display:block; 
    margin-left: auto; 
    margin-right: auto; 
} 

그 반대 대신 폭 오버 플로우를 자동으로 높이를 설정 할 수있는 엄지 손가락의 가로 세로 비율이 훨씬 더 . 어떤 도움이라도 대단히 감사하겠습니다.

+1

이렇게하는 방법을 묻는 스택 오버플로에는 많은 질문이 있습니다. 당신은 질문을하기 전에 당신의 연구를해야합니다 –

답변

0

너무 큰 이미지를 사용하고 있습니다. 느린 대역폭에서 느리게로드됩니다. 이를 방지하려면 미리보기 이미지를 생성해야합니다. 당신이 그들을 programatically 또는 timthumb를 사용하여 생성하는 것이 좋습니다 - https://code.google.com/p/timthumb/

당신이 그것을 사용하면, 스크립트는 자동으로 중심, 자르기 및 크기를 조정할 것입니다. 당신은

<img src="timthumb.php?src=IMAGE_SOURCE&w=WIDTH&h=HEIGHT" /> 
+0

하나는 거대한 방법이며 테스트를 마쳤을 때 그것을 제거하고 싶었어요. 최악의 시나리오에서 코드를 작동 시키려고했습니다. 센터에서이 스크립트가 자릅니다. 또한 지금까지 업로드 된 사진의 종횡비가 다른 카메라에서 가져온 장소에 있습니다. 그것을 고려할 것인가? – jamie

+0

이 경우의 라디오는 중요하지 않습니다. 다음은이 라이브러리의 작동 방식을 보여주는 예입니다. 원본 그림 : http://arkadiazary.eu.hostingasp.pl/Storage/Produkty/10_of_Clubs___Catta_by_kenket.jpg 자르기 : http://arkadiazary.eu.hostingasp.pl/timthumb .php? src = Storage/Produkty/10_of_Clubs ___ Catta_by_kenket.jpg & w = 300 & h = 200 – Lemurr

+0

파블로, 지금 구현해 주신 정보를 보내 주셔서 감사합니다. – jamie

0

이 질문은 조금 청소까지 사용할 수처럼 소리 너비와 높이를 지정해야합니다. 후속 조치를 게시하여 언급 한 다른 문제에 대해 질문 할 수 있습니다. 하지만 이미지에 CSS 속성을 설정하는 대신 부모의 이미지를 중앙에 배치하는 것에 대한 질문에 대답하려면 ~ center이미지의 부모div으로 설정하십시오.

+0

Ive가 작동하지 않으면 컨테이너 div의 코드가 다음과 같이 나타납니다. .feature_thumb { \t width : 127px; \t 높이 : 98px; \t 테두리 : 1px 단색 # 999999; \t 텍스트 정렬 : 가운데; \t 오버플로 : 숨김; } – jamie

+0

당신이 달성하고자하는 것을 정확히 설명하고,이 경우 HTML과 CSS를 모두 달성하려는 작은 (그러나 완전한) 예제를 사용하여 질문을 편집해야한다고 생각합니다. 내 대답은 "작동하지 않는"이유는 단순히 "div의 이미지를 중앙에 놓으려고"하는 것이 아니기 때문이라고 가정합니다. 대신, 크기를 조정하고 작은 div로 래핑하여 "클립"할 이미지가 있습니다. 맞습니까? – spaaarky21

관련 문제