Question

我有一个博客，对于这个博客，有一些摘要帖子包含每个帖子中的第一张图片。为了尝试保持摘要图像的大小，所以我不得不用javascript调整它们的大小。问题是在调整大小后，图像有时会出现。在许多情况下，我必须在图像显示在摘要帖子中之前重新加载窗口几次。我不明白是什么导致了这一点。博客：http://kingarthur13th.blogspot.com/

这是javascript：

function createSummaryAndThumb(pID){
   var div = document.getElementById(pID);
   var imgtag = "";
   var img = div.getElementsByTagName("img");


   var img_thumb_width;
   var img_thumb_height;

   var summ = summary_noimg;
   if(img.length>=1) {  

        img_thumb_width  = Math.round(img[0].naturalWidth  * 0.6);
        img_thumb_height = Math.round(img[0].naturalHeight * 0.6);

        imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img  src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" style=" padding:5px;border:1px solid #222;"/></span>';
        summ = summary_img;
    }

    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
}

Answer 1

要尝试的几件事

检查您从img_thumb_width和img_thumb_height获得的值。您应该使用整数值，您可能会得到一个浮点数。

此外，也许图像正在下载，但它只是需要时间来显示。

Answer 2

正如你所说，图像下载得很好，但它们没有显示，因为脚本返回的宽度和高度值为0.

您可以对脚本进行故障排除，找出值为什么不返回自然维度* 0.6（在我看来，您的脚本应该可以正常工作 - IDK在那里发生了什么），或者您可以指定宽度和设置高度像这样自动：

<span style="float:left; padding:0px 10px 5px 0px;"><img  src="'+img[0].src+'" width="100px" height="auto" style=" padding:5px;border:1px solid #222;"/></span>'

或者更好的是，创建一个指定max-width和height auto的CSS类，如下所示：

.blog-thumbnail { max-width: 100px; height: auto; }

我建议选择这两个选项中的一个有两个原因：

您仍然可以实现保持图像比例的目标。
您的设计会更清晰，因为您的所有图像宽度都相同。

为什么有时显示图像而其他时间不显示？

2 个答案: