1

Wordpress は、投稿を編集しているときにサムネイルの画像を完全に中央に配置する機能を使用しているため、投稿を編集しているときは次のようになります。

ここに画像の説明を入力

wordpressページでそのように画像を表示しようとしていますが、wordpressを使用してそれを行うような関数を作成する方法がわかりません:

$s_x = floor( ($orig_w - $crop_w) / 2 );
$s_y = floor( ($orig_h - $crop_h) / 2 );

だから、これは私のページでどのように見えるかです:

ここに画像の説明を入力

上から表示するだけなので、画像を切り取ります。中央やサイズ変更はありません

これは私のマークアップです:

            echo '<div class="aimagediv" >'; //        
            echo '<img src="'.$s['project_image'].'" alt="" width="270" />';
            echo '</div>';

何かを表示するためだけに幅を制限しています。そのようにするのは間違っていることを知っています。そのため、画像をリサイズしてdivの中央に配置する機能を探しています。

誰かがこれで私を助けることができますか?

4

3 に答える 3

1

このdivには、画像以外のコンテンツがありますか？CSSを使用して、divの高さ/幅を定義し、画像を背景サイズが表紙の背景画像として設定できます...次のようになります。

**編集-OPがechoを使用していたため、前後にPHPタグを追加します**

<?php
    // do all the php code here that you want before the image div
?>

<style type="text/css">
div.aimagediv {
    height:270px;
    width:270px;
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
}
div.aimagediv:hover {
    cursor:pointer;
}
</style>

<div class="aimagediv" style="background-image:url('<?=$s['project_image']?>');"></div>

<?php
    // do the rest of your php stuff here
?>

次に、divをクリック可能にしたい場合は、次のようなonclickを使用できます:(上のdiv行をこれに置き換えます）

<div class="aimagediv" style="background-image:url('<?=$s['project_image']?>');" onclick="window.location='page_id=42&slide=<?=$i?>';"></div>
于 2012-10-24T14:31:10.890 に答える
1

この画像をdivの背景画像として配置し、cssを使用して背景サイズをカバーに変更し、背景位置を中央に変更する方が良いと思います...

HTML 

echo '<div class="image" style="background-image:url(\''.$s['project_image'].'\');">';

echo '</div>';
?>​

CSS

.image{
width: 270px;
height: 270px;
background-size:cover;
background-position: center;
}​

これが実際の動作を示す jsfiddle です。

http://jsfiddle.net/Jhu2Y/

于 2012-10-24T14:28:15.070 に答える
0

コンテナの高さはおそらく制限されています。したがって、唯一の幅を​​設定すると、アスペクト比を維持しながら、その幅に合わせて画像が引き伸ばされます。高さだけを設定すると、逆になります。幅と高さの両方を設定すると、それらの境界に合わせて画像が引き伸ばされます（したがって、アスペクト比が台無しになる可能性があります。したがって、あなたの場合は、高さを設定するか、両方を設定します（ただし、比率が正しいことを確認してください）

コンテナに対して画像を中央に配置する場合は、CSS を使用して左右の余白を auto に設定します。

于 2012-10-24T14:26:28.150 に答える