jQuery的max-height和max-width返回错误值

Question

我需要翻译以下内容：我在使用max-width和max-height时遇到了问题。假设我有以下CSS规则：

img.item { max-width: 325px; max-height: 390px; }

并在我的文档中添加以下 img：

<img class="item" src="http://us.dorothyperkins.com/wcsstore/DorothyPerkinsUS/images/catalog/80000095_normal.jpg">

原始图像宽度 x 高度为：342 x 464

如果我尝试使用 jQuery 获取 max-width 和 max-height 的值，结果是错误的。

$('img.item').css('max-width');
// returns 357px
$('img.item').css('max-height');
// returns 429px

有什么想法为什么会这样吗？或者我该如何获得正确的尺寸？

如果我使用$('img.item').width()和$('img.item').height()，我会得到计算出来的值，这对我来说不好。

谢谢。

- Israhack

---

你应该将高度和宽度应用于img标签本身。 - OptimusCrime

但如果我将高度和宽度应用于图像本身，它将无法保持图像大小的正确比例。 - Israhack

一定有其他影响因素，因为这个例子完美地运行了... http://jsfiddle.net/HTC8J/ - 你用的是什么浏览器？ - Reinstate Monica Cellio

同意@Archer。Israhack，你的元素上有填充吗？这是在哪个浏览器中发生的？ - Blowsie

Answer 1

我已经检查了你的代码并添加了最新的jQuery，它可以正确地工作并得到正确的结果。 请在这里检查我的代码。

alert($('img.item').css('max-width'));

alert($('img.item').css('max-height'));

img.item { max-width: 325px; max-height: 390px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="item" src="http://us.dorothyperkins.com/wcsstore/DorothyPerkinsUS/images/catalog/80000095_normal.jpg">

可能还有其他原因是你的图片的max-height和max-width可能被其他class覆盖了。

- Bhavin Solanki

Answer 2

奇怪的结果。我在http://jsfiddle.net/JGwqY/上创建了一个小工具，其中max-width和max-height的值是正确的。

- Juris Vaiders