1

My background of my site is responsive and works great.But I'm having issues with the images. I want them to look "fixed" as in the same position with the background no matter the resolution,. Example re-sizing the browser from 990px by 537px to 990px by 270px the image will look like it never moved because the width/height will expand or contract depending on the resolution of the browser.

Good news I figured the CSS to make the WIDTH of the image fluid with the background! Bad news is if I make height 100% or 14%, the height looks the same. Is it true that I need to specificity my height? Why not width? How?

#block-imageblock-4{
    width:26%;
    height:14%;
     margin-top:7%;
     margin-bottom:1%;
    margin-left:37%;
    margin-right:36.5%;
        max-width:100%;
    max-height:100%;


}

SO my question is how would I show my image to look like its in the SAME position on the screen if my resolution is very large or very small? Please provide a example and not just a link. Like I said I figured out to make the width of the image fluid, just not the height but if you have a better way please share.

I'm using Drupal to build my site FYI.

<---------------------------------------------EDIT---------------------------------------->

Here are two example of what I am talking about. Please ignore all images BUT the image labeled IMAGE1.

CSS for Image1: 

 #block-imageblock-4{
        width:26%;
        height:14%;
         margin-top:7%;
         margin-bottom:1%;
        margin-left:37%;
        margin-right:36.5%;
            max-width:100%;
        max-height:100%;


    }

First Image- Browser Resolution: 480px by 356px

enter image description here

Second Image- Browser Resolution: 520px by 630px enter image description here

4

1 回答 1

1

js fiddle中的代码： JSfiddle

这是我用 CSS 做的：

html {
    background-color: black;
}

#master {
    position: relative;
}

#img {
    width: 23%;
    max-width: 120px;
    display: inline-block;
    background-color: red;
    position: absolute;
    bottom: 80%;
    height: 10%;
    max-height: 40px;
    margin-top: -80px;
    left: 50%;
    margin-left: -40px;
}

HTML：

<div id="master"> </div>
<div id="img"> </div>

您制作一个外部 div ie master 将其设置为图像本身的相对位置您提供我提到的属性根据您拥有的图像大小编辑宽度和高度，并编辑 margin-top 和 margin-left 以将其偏移以完全适合它到你想要的位置，一切都会顺利进行，希望对你有所帮助。

以及编辑底部：X％；（X 中的百分比数字）以编辑 y 轴中的位置。

于 2014-05-30T22:06:41.980 回答