在 Wordpress 上的图像上创建悬停后图像不会调整大小

Question

在为我的图像添加悬停功能时，我尝试使用的文件最终与我所有其他部分的圆形外观不匹配。

这是一个名为 coworking 的部分的代码，没有悬停。接下来是名为虚拟办公室的部分的代码，带有悬停。

<li>
    <img class="alignnone wp-image-241 size-thumbnail" 
         src="https://liveprimary.com/wp-content/uploads/2017/03/coworking_dark-1-300x300.jpg"
         alt="" width="300" height="300" />
    </a>
    <h4>Coworking
        </a>Starting at $300
    </h4>
</li>
<li>
    <a href="http://staging.liveprimary.com/virtual-memberships/">
        <img class="alignnone wp-image-242 size-thumbnail" 
           src="http://staging.liveprimary.com/wp-content/uploads/2017/06/offices_dark.jpg" 
           onmouseover="this.src='http://staging.liveprimary.com/wp-content/uploads/2018/03/offices_light.jpg'" 
           onmouseout="this.src='http://staging.liveprimary.com/wp-content/uploads/2017/06/offices_dark.jpg'"
           alt="" width="300" height="300" 
        />
    </a>

    <h4>
        <a data-open="modal-virtual-memberships">Virtual Office
        </a>Starting at $80
    </h4>
</li>

在网站上显示时，共享办公和虚拟办公室的圈子格式大小不同。

我尝试调整虚拟办公室部分的宽度和高度，但没有成功。

暂存站点：http://staging.liveprimary.com/membership/ 密码（如果询问）：Pr1m@ry!

有什么想法吗？非常感谢您的帮助！

Answer 1

由于您调用了完整（大）图像路径，因此发生了这一问题。 请用这个替换。

光：http://staging.liveprimary.com/wp-content/uploads/2018/03/offices_light-300x300.jpg

黑暗：http://staging.liveprimary.com/wp-content/uploads/2017/06/offices_dark-300x300.jpg

Answer 2

这是因为您的virtual office's circle img 大小不同。而且它的宽度和高度不相等。

所有其他img siz 与300*300 相同。

当您尝试创建circle img 时，最好使用same width and height images。它是代码方法。