Tumblr主题代码故障求助：图片溢出及页面加载缓慢

嘿，别担心！我帮你一步步搞定这两个问题，完全不用复杂的编程知识~

一、修复图片溢出的问题 #

你遇到的图片溢出，是因为图片宽度超过了帖子容器#entries的宽度，直接撑破了布局。我们只需要给图片加个简单的样式，让它自动适应容器大小：

1. 在你的主题代码里，找到<style>标签（通常在代码开头或结尾位置），把这段代码加进去：

#entries img {
  max-width: 100%;
  height: auto;
}

这段代码的作用是：让所有帖子里的图片最大宽度不超过容器的100%，高度自动按比例缩放，绝对不会超出帖子边框。

另外，你的#entries设置了固定的margin-left: 650px，在手机或小屏幕上会导致帖子容器特别窄，也容易触发溢出。可以再加一段响应式代码，让小屏幕上的布局更合理：

@media (max-width: 1000px) {
  #entries {
    margin-left: 20px; /* 缩小左边距，给小屏幕留出空间 */
    width: calc(100% - 40px); /* 让帖子容器占满屏幕宽度，减去左右内边距 */
  }
}

二、解决页面加载缓慢的问题 #

加载慢主要是因为图片文件太大，我们可以用Tumblr自带的图片尺寸优化功能，不用自己手动压缩图片：

1. 找到主题里引用图片的代码（通常是类似<img src="{PhotoURL}" />或者<img src="{PhotoURL-HighRes}" />这样的内容），把里面的PhotoURL或PhotoURL-HighRes改成PhotoURL-500或者PhotoURL-700。
   比如：

<!-- 原来的代码 -->
<img src="{PhotoURL-HighRes}" />

<!-- 修改后的代码 -->
<img src="{PhotoURL-700}" />

Tumblr会自动生成700像素宽的优化版图片，文件大小会小很多，加载速度自然就快了。如果你的帖子需要更大的图片，也可以选PhotoURL-1280，但尽量选刚好够用的尺寸就好~

这样调整之后，你的帖子图片既不会溢出，页面加载也会顺畅很多啦！

内容的提问来源于stack exchange，提问作者LOL