고정 크기 div에 수직 이미지 이미지 축소판

Question

좋아,이 문제에 대해 논의 된 것으로 알고 있으며 사람들은 자신의 질문에 대해 청색에 대한 답변을 얻었지만 어느 누구도 나를 위해 일하지 않습니다.

동적으로 생성되거나 AJAX를 통해 고정 크기의 div에로드되는 세로 가운데 맞춤 미리보기입니다. 내 경우 200 * 200 픽셀.

이 사이트로 이동 : click here 예를 들어 "웹"버튼을 클릭하십시오. 모든 미리보기 이미지가 상자 위에 있거나 맨 위에 표시됩니다. 나는 정말로 내가 생각할 수있는 모든 것을 시도했다. 제가 알고있는 유일한 방법은 이미지 썸네일 태그에 이미지 높이를 하드 코딩하는 것입니다.하지만 DB에 치수를 추가해야하기 때문에 영원히 걸릴 것입니다.

Firebug를 사용하는 경우 사이트에서 테스트를 실행하기 위해 모든 것을 쉽게 편집 할 수 있습니다.

누군가 나를 도와 줄 수 있기를 바랍니다. 나는 정말로 감사 할 것이다. 대단히 감사합니다.

Answer 1

이 방법이 유용합니까?

<div id="outer"> 
    <div id="inner"> 
     //image goes here 
    </div> 
</div> 

#outer { 
    display:table; 
} 
#inner { 
    display:table-cell; 
    vertical-align:middle; 
} 

Answer 2

불행히도 저는 CSS가 진정한 수직 정렬 구조를 제공하지 못했기 때문에 안타깝게도 쉽게 대답 할 수 없습니다. 내가 아는 두 가지 옵션이 있습니다 (다른 사람이 없다는 것을 의미하지는 않습니다) : div.onepic 내 img 요소의 절대 위치 지정 사용 (http://phrogz.net/CSS/vertical-align/index.html의 방법 1 참조) 또는 javascript를 사용하여 Y 섬네를 계산하고 각 div.onepic의 위쪽 패딩은 img와 div.onepic의 Y 높이의 차이의 절반입니다. jquery를 사용하면 js 코드를 사용하는 것이 매우 쉽습니다.

Answer 3

보통 이렇게해야 할 때 <img> 태그를 사용하지 않습니다. 대신, 그 이미지를 background-position: 50% 50%을 가진 요소의 배경에 놓았습니다. 예 :

HTML-SEO 친화적 인 또는 (더 CSS가 없을 때의 경우) 정상적으로 분해되지 않을 수 있습니다

.thickbox { 
    display: block; 
    width: 200px; 
    height: 200px; 
    background-position: 50% 50%; 
} 

물론

<div class="onepic"> 
    <a href="http://www.dinomuhic.com/pic/web/Wigga.jpg" class="thickbox" style="background-image: url('http://www.dinomuhic.com/pic/web/Wigga_thumb.jpg')"></a> 
</div> 

CSS. 하지만 그 이유로, 당신은 <img> 태그를 넣어 설정을 display: none에, 다음과 같이 할 수 있습니다

HTML

<div class="onepic"> 
    <a href="http://www.dinomuhic.com/pic/web/Wigga.jpg" class="thickbox" style="background-image: url('http://www.dinomuhic.com/pic/web/Wigga_thumb.jpg')"> 
     <img src="http://www.dinomuhic.com/pic/web/Wigga_thumb.jpg"> 
    </a> 
</div> 

CSS

.thickbox { 
    display: block; 
    width: 200px; 
    height: 200px; 
    background-position: 50% 50%; 
} 
.thickbox img { 
    display: none; 
} 

을 그리고 거기 당신은 그것이있다. 자바 스크립트가없는 SEO 친화적 인 솔루션 :-). 당신이 개념을 얻기를 바라면서, 내가 더 설명 할 필요가 있으면 알려주세요.

Answer 4

또 다른 옵션이지만, 의미 상 정확하지 않거나 CSS 중심은 테이블/행으로 줄 바꿈하고 세로로 정렬하는 것입니다. 페이지에있는 것이고 화면 판독기에서 발생 가능한 접근성 문제를 알고 있다면 나중에 해결할 수있는 빠른 해결 방법 일 수 있습니다 - 시간 척도에 따라 달라질 수 있습니다 ...

Answer 5

많이 있습니다 코드처럼 작동하지만 매력처럼 작동합니다.나는이 주제에 관한 여러 게시물을 읽은 후에 그것을 생각해 냈다.

.friend_photo_cropped{ 
    overflow: hidden; 
    height: 75px; 
    width: 75px; 
    position:relative; 
} 
.friend_photo_cropped img{ 
    position:relative; 
} 

귀하의 코드는 다음과 같아야합니다 :

<?php 
list($width, $height) = getimagesize($yourImage); 
if ($width>=$height) 
{ 
     $h = '75'; 
     $w = round((75/$height)*$width); 
} 
else 
{ 
     $w = '75'; 
     $h = round((75/$width)*$height); 
} 
$top = -round(($h-75)/2); 
$left = -round(($w-75)/2); 
echo '<td height="75">'; 
echo '<div class="friend_photo_cropped">'; 
     echo '<img src="'.$yourImage.'" width="'.$w.'" height="'.$h.'" style="top:'.$top.'px;left:'.$left.'px;">'; 
echo '</div>'; 
echo '</td>'; 
?>