0

OK、私はこれが死ぬまで議論され、人々が彼らの質問に対して青信号の答えを得たことを知っていますが、それらのどれも私のために働きません.

私がやりたいのは、動的に生成されるか、AJAX を介して固定サイズの div に読み込まれるサムネイルを垂直方向に中央揃えにすることです。私の場合、200*200 ピクセルです。

このサイトにアクセスしてください:ここをクリックして、たとえば [Web] ボタンをクリックします。すべてのサムネイルがボックスの上または上にあることがわかります。考えられることはすべて本当に試しました。私が知っている唯一のオプションは、画像の高さをすべてのサムネイルタグにハードコードすることですが、DBに寸法を追加する必要があるため、これには永遠に時間がかかります.

Firebug を使用している場合は、サイト上のすべてを簡単に編集してテストを実行できます。これが私が主に行った方法です。

ここで誰かが私を助けてくれることを願っています。本当にありがたいです。どうもありがとうございました。

4

5 に答える 5

6

<img>通常、これを行う必要がある場合は、タグを使用しません。代わりに、要素の背景にその画像をbackground-position: 50% 50%. 例：

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')"></a>
</div>

CSS

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

確かに、それは SEO に適していないか、適切に分解可能ではない可能性があります (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;
}

そして、あなたはそれを持っています。JavaScript を使用しない、SEO に適したソリューションです :-)。コンセプトを理解していただければ幸いです。さらに説明が必要な場合はお知らせください。

于 2010-02-17T21:56:31.557 に答える
0

たくさんのコードですが、魅力的に機能します。このテーマに関するいくつかの投稿を読んだ後、私はそれを思いつきました。さまざまなサイズの画像を固定幅と高さの div に配置します

CSS には次のものが含まれている必要があります。

.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>';
?>
于 2012-10-21T13:38:17.587 に答える
0

別のオプションは、意味的に正しくなく、CSS に重点を置いていませんが、テーブル/行にラップして垂直方向に配置することです。それがページ上の 1 回限りのものであり、スクリーン リーダーのアクセシビリティの問題の可能性を認識している場合は、後で対処できるクイックフィックスになる可能性があります - タイムスケールによって異なります...

于 2010-02-17T22:14:31.410 に答える