Mein Blog Home page thumbnails plötzlich verschwommen, aber andere Bilder sind in Ordnung

Question

Dies ist mein Blog http://www.dateswithdanie.com gehostet auf Blogger. Vor einigen Tagen sind die Bilder neben den Posttiteln auf der Startseite einfach verschwommen. Ich habe versucht und versucht, es zu beheben, suchte überall nach Lösungen. Es ist überraschend, weil es gut funktionierte, ich habe den Code nicht verändert und plötzlich änderten sich die Dinge. Bitte hilf mir mit einer Lösung wie ich wirklich frustriert bin, Danke.

-Code -

<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

Derzeit Ihr Thema JavaScript-Code wird mit den Dimensionen des Thumbnail-Bildes zu ändern. Aber aufgrund eines Fehlers (wie in der Browser-Konsole) funktioniert das nicht mehr. Ein besserer Ansatz wäre die Verwendung des nativen Bildgrößenänderungsoperators resizeImage des Bloggers, um die Bilddimensionen zu ändern. Der obige Code wird wie folgt geändert werden -

<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 2

Bild hochgeladen ist zu klein 72X72 für Container und das mit CSS Hintergrund-size Abdeckung wird strecken, um Behältergröße versuchen. So versuchen, das größere Bild unter Verwendung gemäß der Behälterbreite

background-size: cover; 

Answer 3

Ja, es ist die für alle Blogger users.The Beste, was zu tun ist, nicht gehen in ‚Profil besuchen‘ zu halten oder ‚mein Profil‘ oft nach dem Hochladen Ihrer Das Bild wurde vervollständigt. Es ändert sich nur, wenn Sie auf den Link 'Profil besuchen' gehen und nicht anders.