img 上的 width="" 和 "height"" 弄乱了他们的能见度答案

【问题标题】：width="" and "height"" on img messing their visibilityimg 上的 width="" 和 "height"" 弄乱了他们的能见度
【发布时间】：2012-07-03 03:37:05
【问题描述】：

为什么我需要指定此页面上图像的 width="" 和 height="" 才能使其正确显示？此列表中未指定其暗淡的图像不可见。可以不用指定吗？

谢谢！

http://www.rollinleonard.com/elements/index-new.php

http://jsfiddle.net/ZTDjf/ -删除此图像中突出显示的位：http://i.imgur.com/SquKx.png - 看看结果如何隐藏该图像？这是为什么呢？

【问题讨论】：

请发布相关代码 sn-p 或创建一个 jsfiddle，该页面一团糟，我找不到显示您所述行为的图像。
starbeamrainbowlabs -- 好吧，不... i.imgur.com/SquKx.png
鲍勃戴维斯-jsfiddle.net/ZTDjf
你能从小提琴中删除一些东西，让它变得尽可能小，但仍然有问题吗？无论如何，从您在屏幕截图中挑出的图片中删除高度和宽度属性时，我看不出有什么区别。
当然！在这里更新：jsfiddle.net/ZTDjf/1

标签： javascript html css width image

【解决方案1】：

我认为 jquery.hover_caption.js 依赖于您为图像指定的宽度和高度。

它将采用宽度和高度值并应用于插件动态创建的父 DIV。

如果您不指定图像的宽度和高度，插件将不知道它应该放置到父 div 的高度/宽度。所以父 div 会有<div style="width: 0px; height: 0px;">

这就是图片没有显示的原因。

请参阅下面的 html 标记：

<div style="width: 0px; height: 0px;"><h3 class="hover_caption_caption" style="padding: 0px; color: white; width: 0px; font-size: 18px; position: absolute; margin: 0px; display: none;">SPR scene 7.1 2011</h3><img title="SPR scene 7.1 2011" src="zzzthumbs/spr-scene7.1.jpg" style="z-index: -1; position: relative; font-weight: bold;"></div>

【讨论】：

非常感谢您在这里向这个傻瓜解释问题所在！对不起，我没有让我的小提琴更简洁。既然我知道了这一点，有没有什么方法可以自动发现宽度和高度值而无需单独输入？

【解决方案2】：

我认为您所要做的就是在“加载”处理程序中运行插件，而不是“就绪”。

<script>
  $(window).load(function() {
    $('img').hover_caption();
  });
</script>

当您以“就绪”状态运行它时，图像尚未加载，因此插件不会知道它们有多大。

【讨论】：

啊！这确实使它们可见，但随后破坏了标题的功能。感谢您给我更多的工作机会。我会尝试形成一个更完整的问题并再次发布。