Wordpress 使用onmouseover更改包含wp\u get\u attachment\u图像的图像大小

下面是我用来显示多行产品的代码的一部分，每行产品旁边都有小缩略图（35x35像素）。这是我创建的一个管理页面，很像用于管理产品的电子表格，所以它们占用的空间越小越好

一切都很好，但我想让客户端“mouseover”查看更大的图像。我知道如何使用“onmouseover”和/或CSS来实现图像的放大，但通常是使用传统的

元素

甚至有可能改变或点击wp_get_attachment_image来达到同样的效果吗？我不能简单地将代码粘贴到

元素中，因为可以说它“不在那里”，无法输入（很抱歉我没有术语，但我假设这是一个函数，而不是我可以使用的静态代码）

或者，有没有办法不设置数组（35,35），只将

设置为特定大小的容器，让图像填充该容器，然后使用该元素进行图像更改

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>';
    }
}

if（$attachments）{
foreach（$attachments作为$attachment）{
$thumbimg=wp_get_attachment_image（$attachment->ID，数组（35,35））；
$productlist.='
”。$thumbimg.
”；
}
}

我以前用过两种不同的方法：

1。将图像显示为背景图像

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

2。使用容器元素上的溢出：隐藏来“裁剪”图像的可见部分

PHP:

这也适用于百分比，但由于您的图像是固定宽度的，所以我使用了这些尺寸，以便更清楚发生了什么

注意：

这些例子都是基于我所做的工作，所以这个概念在这两种情况下都是有效的，应该是可行的，但是，我已经在上面做了一些代码更改，所以还没有经过测试

---

我发现选项1可以更轻松地处理图像，特别是当图像大小不同或需要响应时。

这太完美了！我选择了选项1，因为我希望沿着这些路线填充一个容器或其他东西，然后“悬停”。喜欢这个！

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>';
    }
}

.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%;
}

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

.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;
}