如何使tumblr主题（特别是角落图像）适应不同的屏幕分辨率？ [英] How to make a tumblr theme (specifically corner images) adjust to different screen resolutions?

问题描述

我在tumblr（主要是lagomorph.tumblr.com）上为一个角色问博客写了一个令人愉快的主题。
然而，即使主题看起来不错，而且图像全部到位，但其他用户声称，在其较小的（宽度方向上，我假设）监视器上，角色和语音泡沫与主要内容框，如下所示：

您可以根据您的设计调整宽度，顶部，左侧值。这只是为了向您展示继续前进的方向。

提示：在这种情况下，请勿使用jpg图片。尝试使用透明背景的PNG。

I have a pleasant theme on tumblr ( mostlylagomorph.tumblr.com ) for a character "ask" blog. However, even though the theme looks nice to me, and the images are all in place, other users are claiming that, on their smaller (width-wise, I presume) monitors, the characters and speech bubbles are overlapping the main content box, like so:

[link]

Also, it's worth noting that the main content box is zoomed in upon- which makes me think that the entire theme simply zooms in upon itself when subjected to a smaller screen resolution/size.

Is there any way that I can fix this issue- and make the tumblr theme adjust to different screens so that images will not overlap? Thank you so much for reading, and for your time!

This is the code that I am using for my images:

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

I can paste any other codes necessary, if it will help find a solution. Thank you!

edit: Here is the entirety of the code (erased a previous link in order to add this one- as a new user, I'm only able to add two. )

pastebin code

解决方案

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%
}

HTML:

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

Demo: http://jsfiddle.net/lotusgodkk/GCu2D/732/ You can adjust width,top,left values according to your design. This is just to show you the direction to proceed.

Tip: Don't use jpg images in this case. Try a png with transparent background.

这篇关于如何使tumblr主题（特别是角落图像）适应不同的屏幕分辨率？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！