我的博客主页缩略图突然变得模糊，但其他图像正常

Question

这是我在 blogger 上托管的博客 http://www.dateswithdanie.com。几天前，主页上 post 标题旁边的图片变得模糊。我已经尝试并尝试修复它，到处寻找解决方案。这很令人惊讶，因为它工作正常，我没有篡改代码，突然间事情发生了变化。请帮助我解决方案，因为我真的很沮丧，谢谢。

代码-

<b:if cond='data:blog.pageType == &quot;index&quot;'>
          <b:if cond='data:post.thumbnailUrl'>
            <div class='block-image'><div class='thumb'>
              &lt;a href=&#39;<data:post.url/>&#39; style=&#39;background:url(<data:post.thumbnailUrl/>) no-repeat center center;background-size:cover&#39;&gt;&lt;/a&gt;
              </div>
             </div>
            <b:else/>
            <b:if cond='data:post.firstImageUrl'>
              <div class='block-image'><div class='thumb'>
                &lt;a href=&#39;<data:post.url/>&#39; style=&#39;background:url(<data:post.firstImageUrl/>) no-repeat center center;background-size:cover&#39;&gt;&lt;/a&gt;
                </div>
              </div>
              <b:else/>
              <div class='block-image'><div class='thumb'>
                &lt;a href=&#39;<data:post.url/>&#39; style=&#39;background:url(http://1.bp.blogspot.com/-eAeO-DYJDws/Vkqtj4HFBFI/AAAAAAAAB0o/Q5OLsyONXM0/s1600-r/nth.png) no-repeat center center;background-size:cover&#39;&gt;&lt;/a&gt;
                </div>
               </div>
            </b:if></b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
          <b:if cond='data:post.thumbnailUrl'>
            <div class='block-image'><div class='thumb'>
              &lt;a href=&#39;<data:post.url/>&#39; style=&#39;background:url(<data:post.thumbnailUrl/>) no-repeat center center;background-size:cover&#39;&gt;&lt;/a&gt;
              </div>
             </div>
            <b:else/>
            <b:if cond='data:post.firstImageUrl'>
              <div class='block-image'><div class='thumb'>
                &lt;a href=&#39;<data:post.url/>&#39; style=&#39;background:url(<data:post.firstImageUrl/>) no-repeat center center;background-size:cover&#39;&gt;&lt;/a&gt;
                </div>
             </div>
              <b:else/>
              <div class='block-image'><div class='thumb'>
                &lt;a href=&#39;<data:post.url/>&#39; style=&#39;background:url(http://1.bp.blogspot.com/-eAeO-DYJDws/Vkqtj4HFBFI/AAAAAAAAB0o/Q5OLsyONXM0/s1600-r/nth.png) no-repeat center center;background-size:cover&#39;&gt;&lt;/a&gt;
                </div>
              </div>
            </b:if></b:if>
 </b:if>

Answer 1

上传的图片对于容器来说太小了 72X72，带有 css background-size 封面的图片将尝试拉伸到容器大小。所以尝试根据容器宽度使用更大的图像

background-size: cover;

Answer 2

目前，您的主题代码正在使用 JavaScript 更改缩略图的尺寸。但由于某些错误（如在浏览器控制台中看到的那样），它不再起作用。更好的方法是使用 Blogger 的本机图像大小调整运算符 resizeImage 来更改图像尺寸。上面的代码会变化如下-

<b:if cond='data:blog.pageType == &quot;index&quot;'>
      <b:if cond='data:post.thumbnailUrl'>
        <div class='block-image'><div class='thumb'>
          &lt;a href=&#39;<data:post.url/>&#39; style=&#39;background:url(<b:eval expr='resizeImage(data:post.thumbnailUrl, 370)' />) no-repeat center center;background-size:cover&#39;&gt;&lt;/a&gt;
          </div>
         </div>
        <b:else/>
        <b:if cond='data:post.firstImageUrl'>
          <div class='block-image'><div class='thumb'>
            &lt;a href=&#39;<data:post.url/>&#39; style=&#39;background:url(<b:eval expr='resizeImage(data:post.firstImageUrl, 370)' />) no-repeat center center;background-size:cover&#39;&gt;&lt;/a&gt;
            </div>
          </div>
          <b:else/>
          <div class='block-image'><div class='thumb'>
            &lt;a href=&#39;<data:post.url/>&#39; style=&#39;background:url(http://1.bp.blogspot.com/-eAeO-DYJDws/Vkqtj4HFBFI/AAAAAAAAB0o/Q5OLsyONXM0/s1600-r/nth.png) no-repeat center center;background-size:cover&#39;&gt;&lt;/a&gt;
            </div>
           </div>
        </b:if></b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
      <b:if cond='data:post.thumbnailUrl'>
        <div class='block-image'><div class='thumb'>
          &lt;a href=&#39;<data:post.url/>&#39; style=&#39;background:url(<b:eval expr='resizeImage(data:post.thumbnailUrl, 370)' />) no-repeat center center;background-size:cover&#39;&gt;&lt;/a&gt;
          </div>
         </div>
        <b:else/>
        <b:if cond='data:post.firstImageUrl'>
          <div class='block-image'><div class='thumb'>
            &lt;a href=&#39;<data:post.url/>&#39; style=&#39;background:url(<b:eval expr='resizeImage(data:post.firstImageUrl, 370)' />) no-repeat center center;background-size:cover&#39;&gt;&lt;/a&gt;
            </div>
         </div>
          <b:else/>
          <div class='block-image'><div class='thumb'>
            &lt;a href=&#39;<data:post.url/>&#39; style=&#39;background:url(http://1.bp.blogspot.com/-eAeO-DYJDws/Vkqtj4HFBFI/AAAAAAAAB0o/Q5OLsyONXM0/s1600-r/nth.png) no-repeat center center;background-size:cover&#39;&gt;&lt;/a&gt;
            </div>
          </div>
        </b:if></b:if>
</b:if>

Answer 3

是的，这是所有博主的共同点 users.The 最好的办法是不要在上传图片 [=15= 后经常进入 'visit profile' 或 'my profile' ] 只有当你进入 'visit profile'link 时才会改变，否则不会改变。

我的博客主页缩略图突然变得模糊，但其他图像正常

My Blog Home page thumbnails suddenly turned blurry but other images are fine

html

javascript

css

blogs

blogger