0

eコマースサイトを作成していますが、すべてのサムネイルを垂直方向に中央揃えにするのに問題があります。問題は、すべての画像のサイズが異なり、すべてのブラウザで各画像を垂直方向に揃えるのが面倒なことです。さまざまなCSSオプション、、、などを調べましdisplay-tableたline-height。それらは最新のブラウザでは機能しましたが、IEではうまく機能しませんでした（もちろん）。私の考えでは、大規模な大規模なサイトでは、画像のサイズを変更し（問題なく実行できます）、必要な正確なサイズの背景の上に画像をオーバーレイしています。これがどのように行われるかを誰かが知っていますか？もしそうなら、PHPでこれを行う方法のドキュメントを教えていただけますか？

または、画像をオーバーレイするという余分な作業を一切行わずにこれを実行できると誰かが思った場合は、お知らせください。私がここで何をしているのかを見たい場合は、次のようにします。

HTML

<a href="#">
    <div id="product">
        <div id="product-image">
            <img src="" border="0" />
        </div>
        <div id="product-name"></div>
        <div id="product-price"></div>
    </div>
</a>

オプション1：JQUERY（これは私の最善の希望のようでしたが、正しく機能させることができませんでした）

var h = $('#product-image').height();
$.map($('#product-image img'), function(e)
{
    var top =( h- $(e).height())/2;
    $(e).css("margin-top",top);
});

オプション2：CSS

#product
{
    float:left;
    margin:5px;
    width:200px;
    height:200px;
    border:1px solid #999;
}
#product-image
{
    margin:2px auto;
    width:194px;
    height:145px;
    text-align:center;
}
#product-image img
{
    max-height: 100%;
    max-width: 100%;
    vertical-align:middle;
}

編集

Explosion Pillsに感謝し、動作するコードを見つけました。この作業を行おうとしている人には、このjQueryメソッドとFiddleリンクhttp://jsfiddle.net/9VfUS/1/を使用することをお勧めします。

WORKING JQUERY

var h = $('div#product-image').height();
$('div#product-image img').each(function ()
{
    var top = (h - $(this).height()) / 2;
    $(this).css("margin-top",top);
});​
4

2 に答える 2

1

JavaScriptを使用できるのであれば、私はそのように使用します。これは、物事を希望どおりに機能させることが確実であるためです。.map間違った目的で使用しています。あなたが欲しい.each：

$('#product-image img').each(function () {
   var top = (h - $(this).height()) / 2;
   $(this).css("margin-top",top);
});

私はそれhがすでに最も高い画像またはコンテナの高さまたはあなたが持っているものとして正しく計算されたと思います。そうでない場合は、それを行う必要があります。

于 2012-11-21T15:38:21.963 に答える
0

画像のサイズが事前にわかっている場合は、これを試してください...

HTML:
<a href="#">
    <div class="product">
        <div class="product-image" data-image-loc="path_to_your_image">&nbsp;</div>
        <div class="product-name"></div>
        <div class="product-price"></div>
    </div>
</a>

CSS:
div.product-image {
    background-position:center center;
    background-repeat:no-repeat;
    background-color: transparent;
    background-attachment: scroll;
}
div.product-image-width-x-height {
    width:{width}px;
    height:{height}px;
}

JS:
$(document).ready(function() {
    $('div.product-image').each(function() {
        $(this).css({backgroundImage:url($(this).attr('data-image-loc'))});
    });
});

サイズがわからない場合は、すべての画像を新しいサイズに提供するサイズ変更スクリプトで修正し、幅/高さのcssプロパティをdiv＃product-imageCSS宣言に移動するだけです。

于 2012-11-21T15:38:20.147 に答える