在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>

当在网站上显示时，coworking和虚拟办公室的圆形格式大小不同。

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

暂存网站：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。这是一种代码方法。