Html 如何使tumblr主题（特别是角图像）调整到不同的屏幕分辨率？

我在tumblr（mostlylagomorph.tumblr.com）上有一个愉快的主题，主题是一个“问”字博客。 然而，尽管主题对我来说很好，图像也很到位，但其他用户声称，在他们较小的（我想是宽度）显示器上，字符和语音气泡与主内容框重叠，如下所示：

另外，值得注意的是，主内容框被放大了，这让我觉得整个主题在屏幕分辨率/大小更小的情况下会自动放大

有没有什么方法可以解决这个问题，让tumblr主题调整到不同的屏幕，这样图像就不会重叠？非常感谢您的阅读和宝贵的时间

这是我用于图像的代码：

<img style=”position: fixed; left: 0; bottom: 0;” src=”imageurl”>

如果有助于找到解决方案，我可以粘贴任何其他必要的代码。谢谢大家!

编辑：这是全部代码（为了添加此链接，删除了以前的链接-作为新用户，我只能添加两个。）

CSS:

.container {
    width:100%;
    position:relative;
    height:auto;
}
.container img.one {
    max-width:100%;
    width:90%;
}
.container .two {
    position:absolute;
    top:0%;
    left:20%;
    width:26%
}

<div class="container">
    <img class="one" src="http://orig07.deviantart.net/0543/f/2015/144/0/4/tryit_by_wdisneyrp_billcipher-d8unbap.png" />
    <img class="two" src="http://orig08.deviantart.net/dfe9/f/2015/145/8/2/office_by_wdisneyrp_billcipher-d8up8z2.png" />
</div>

HTML:

.container {
    width:100%;
    position:relative;
    height:auto;
}
.container img.one {
    max-width:100%;
    width:90%;
}
.container .two {
    position:absolute;
    top:0%;
    left:20%;
    width:26%
}

<div class="container">
    <img class="one" src="http://orig07.deviantart.net/0543/f/2015/144/0/4/tryit_by_wdisneyrp_billcipher-d8unbap.png" />
    <img class="two" src="http://orig08.deviantart.net/dfe9/f/2015/145/8/2/office_by_wdisneyrp_billcipher-d8up8z2.png" />
</div>

演示： 可以根据设计调整宽度、顶部和左侧值。这只是给你指明前进的方向

---

提示：在这种情况下不要使用jpg图像。尝试一个背景透明的png。

你说的是响应性设计。对于响应性设计，您需要以%而不是px表示的位置、尺寸值。请分享你的代码，这样你会更容易得到解决方案/建议。谢谢你-我在这方面绝对不是天才，所以我感谢所有能得到的帮助。下面是完整的代码（我还将图像代码更改为更易于管理的代码-位于body标签下。添加了两个代码-感谢您的查看。我只希望解决方案相对简单。请查看下面的解决方案，这很快！我是否只需将其粘贴到body标签下？（如果你不介意我问的话，我会如何处理页面上的图像，比如说，在不同的角落？）是的，就是这样。别忘了复制CSS。要操作图像，比如说左上角，使用top:0；left:0表示图像。左下角：left:0；bottom:0；右上角：top:0；right:0；右下角：right:0；bottom:0（这些问题可能会让人觉得很傻，但我对这类问题有点陌生）最后，我应该在代码中的什么地方粘贴CSS？我应该在HTML中粘贴“left:0；bottom:0；”（如果是，在哪里？）还是只在CSS中粘贴？谢谢-你帮了大忙。看看这个链接：。它会消除你的疑虑。