htmlcssresponsive-designfluid-layoutfluid-images

CSS Fluid Image issue


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


Solution

  • the code in js fiddle: JSfiddle

    Here is how I did it with 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>
    

    You make an outer div ie master set it to relative position the image itself you give the properties i mentioned edit the width and height according to the image size you have, and edit margin-top and margin-left to offset it to fit it exactly to the position you wish, and it will all work fluidly, hope that helps.

    as well as editing the bottom:X%; (percentage number in the X) to edit the position in the y-axis.