jQuery css的奇怪行为（宽度）

Question

我试图获取第一个.imagen元素的宽度，然后将其img传递给.imagen。

HTML：

<div class="imagen">
    <div class="normal">
        <img>
    </div>
    <div class="hover">
        <img>
    </div>
</div>

JS：

$(document).ready(function() {
  var ancho = parseFloat($('.imagen').css("width"));
  console.log(ancho);
  $('.normal img').css("width", ancho);
  $('.hover img').css("width", ancho);
});

问题：

对于大视口宽度，一切正常，但对于接近900px宽的视口，实际.imagen宽度与jQuery获得的宽度之间存在差异。

这是.image宽度（229px）：

这是jQuery（237px）获得的宽度：

问题：

为什么存在这种差异？

资源：

这个例子有一个codepen：

https://codepen.io/aitormendez/pen/JpZBKQ

一个（临时）部署的网页有同样的问题：

https://raquelfriera.e451.net/

Answer 1

jquery计算正确。如果你将.imagen与css设置为溢出：隐藏它会像它应该显示悬停效果。这意味着现在您的图像与div.imagen重叠。

如果我将.imagen img设置为width：100％！重要来覆盖img内联样式=“width：265px;”有用。图像的内嵌样式宽度有问题。

Answer 2

这是因为.innerWidth()中的填充。使用.css("width")代替ancho来获取for i in $(seq 1 $rsyncs); do ...的宽度。看看this updated codepen。

Answer 3

好吧，我在脑海里解决了这个问题（不是在实践中）。但我确定这个问题。

后端是用WordPress制作的，WP不允许我构建两个宽度相同的图像。因此，翻转的两个图像（内部.normal和内部.hover）的大小略有不同。第二种情况（img内部.hover）有点大。当jQuery尝试获得.imagen宽度时，此宽度与大图像相同。然后，所有图像都由jQuery调整大小。

要解决这个问题，我必须让第二个img稍微小一点而不是更大。

我的介绍这个奇怪的问题，并非常感谢大家的帮助。