Question

以下是我用于显示多行产品的代码的一部分，每个产品旁边都有微缩略图（35x35像素）。这是我创建的管理页面，非常类似于管理产品的电子表格，因此占用的空间越少越好。

一切都很好，但我希望客户端“鼠标悬停”以查看更大的图像。我理解如何做“onmouseover”和/或使用CSS来实现图像的放大，但通常使用传统的<img src... >元素。

甚至可以改变或点击wp_get_attachment_image来做同样的效果吗？我不能简单地将代码粘贴到<img>元素中，因为它“不存在”，可以说，输入（抱歉我缺乏术语，但我认为这是一个函数，而不是静态代码，我可以与...合作。

或者，是否有办法不设置数组（35,35）并只使<li>成为特定大小的容器，使图像填充该容器，并使用该元素进行图像更改？

if ( $attachments ) {
    foreach ( $attachments as $attachment ) {
       $thumbimg = wp_get_attachment_image( $attachment->ID, array(35,35) );
       $productlist .= '<li style="display: inline-block; vertical-align: top; margin: 0px; margin-right: 7px;">' . $thumbimg . '</li>';
    }
}

Answer 1

我以前用两种不同的方式做过这个：

<强> 1。将图像显示为背景图像

PHP：（注意我已经移动了你的内联css，以便更容易看到代码更改）

if ( $attachments ) {
    foreach ( $attachments as $attachment ) {
        $thumbimg = wp_get_attachment_image_src( $attachment->ID, array(35,35) );
        $productlist .= '<li class="prodimgcontainer" style="background-image:url('.$thumbimg[0] .')"></li>';
    }
}

CSS：

.prodimgcontainer{
    width: 35px; 
    height: 35px; 
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;

    // your inline css: 
    display: inline-block; vertical-align: top; margin: 0px; margin-right: 7px;
}
.prodimgcontainer:hover{
    background-size: 105%;
}

<强> 2。使用overflow：隐藏在容器元素上以“裁剪”图像的可见部分

PHP：

if ( $attachments ) {
    foreach ( $attachments as $attachment ) {
        $thumbimg = wp_get_attachment_image( $attachment->ID, array(35,35) );
        $productlist .= '<li class="prodimgcontainer">' . $thumbimg . '</li>';
    }
}

CSS：

.prodimgcontainer{
    width: 35px; 
    height: 35px; 
    overflow: hidden;

    // your inline css: 
    display: inline-block; vertical-align: top; margin: 0px; margin-right: 7px;
}
.prodimgcontainer img{
    width: 35px;
}
.prodimgcontainer img:hover{
    width: 39px;
    height: 39px;
    /* move the position of the image slightly so it remains centered */
    margin-top: -2px;
    margin-left: -2px;
}

这也适用于百分比，但作为固定宽度的图像，我使用了这些尺寸，因此更清楚发生了什么。

注意：

这些例子都是基于我所做的工作，所以这个概念在两种情况下都是有效的并且应该有效，但是，我已经让他的代码更改超出了我的头脑，所以它还没有经过测试。 / p>
我发现选项1可以更容易地处理图像，特别是如果图像尺寸不同或需要响应。

使用onmouseover来改变图像大小，包括wp_get_attachment_image

1 个答案: