如何相对于具有不同屏幕尺寸的另一幅图像固定图像位置 [英] How to fix an image position relative to another image with different screen sizes

问题描述

我正在编写一个网站/iPad应用程序(使用 PhoneGap )，在该应用程序上我有1024x768的图像幻灯片放映.我想放置另一个图像，例如无论屏幕大小如何(例如，高/低分辨率PC屏幕或1024x768平板电脑显示屏)，在1024x768图像顶部的首页图标都位于完全相同的位置.我尝试使用绝对值，但是位置在不同的显示器中变化，并且与我最初在CS 5中设置的位置不同.

I'm writing a website/iPad app (using PhoneGap), where I have 1024x768 images on a slide show. I'd like to position another image, e.g. the home icon, on top of the 1024x768 images, at exactly the same position, no matter the screen size (e.g. high/low resolution PC screen, or 1024x768 tablet display). I tried absolute, but the position changes in different displays, and it's not the same position as I originally set up in CS 5.

推荐答案

与其他答案类似，但是如果您不想定义宽度和高度，则可以使用float:

Similar to the other answers, but if you prefer not to define the width and height, you can use float:

http://jsfiddle.net/RprTY/

<div>
    <img src="http://placekitten.com/300/300">    
    <img src="http://placekitten.com/30/30" id="smallone">
</div>

CSS:

div{
    float: left;
    position: relative;
}

img{
     vertical-align: bottom;   
}

#smallone{
    top: 0;
    left:0;
    position:absolute;   
}

只要将父容器设置为position: relative或position: absolute，则绝对定位的图像应相对于父容器的左上角定位.这应该完全独立于屏幕分辨率.

As long as the parent container is set to either position: relative or position: absolute, then the absolutely positioned image should be positioned relative to the top left corner of the parent. This should be completely independent of screen resolution.

这篇关于如何相对于具有不同屏幕尺寸的另一幅图像固定图像位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！