0

我正在创建一个电子商务网站，但无法将所有缩略图垂直居中。问题是我所有的图像都是不同的大小，让每个图像在所有浏览器中垂直对齐变得很痛苦。我研究了不同的 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/：

工作查询

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-image CSS 声明。

于 2012-11-21T15:38:20.147 回答