CSS Fluid Image issue

Question

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

Have you tried adding in some javascript to reposition the images on window resize? Can you give an example? — Hristo Georgiev, May 30 '14 at 20:51
I'm using CMS (Drupal) with a module that loads a image as a block. I'm trying to make the IMAGE on top of the background fluid, not the background. — Benjamin Jones, May 30 '14 at 20:51
No but why would this matter? My width of my image is fluid just not my height. — Benjamin Jones, May 30 '14 at 20:53
this may help: [http://stackoverflow.com/questions/5657964/css-why-doesnt-percentage-height-work/](http://stackoverflow.com/questions/5657964/css-why-doesnt-percentage-height-work/) — MilkyTech, May 30 '14 at 20:58
An illustration of what is wrong and what you want would be great. — enapupe, May 30 '14 at 21:02
As you can see the background is fluid, the width of image is fluid, but not the image height. — Benjamin Jones, May 30 '14 at 21:30
did you read that other stackoverflow answer? You cannot have fluid height with pure css — MilkyTech, May 30 '14 at 21:33
Yes but I don't understand where the parent height should go? So it should be width:26%;, height:300px; max-width;100%, max-height:100%; ? — Benjamin Jones, May 30 '14 at 21:37
I understand that the example below will show the image at a height of 140px, but will how would I set the percentage of the height to match the browser reolution? http://stackoverflow.com/questions/5657964/css-why-doesnt-percentage-height-work/ #working{ width:80%; height:140px; background:orange; } — Benjamin Jones, May 30 '14 at 21:48
you could use javascript to determine the window height and then change the image height accordingly — MilkyTech, May 30 '14 at 21:53

score 1 · Accepted Answer · edited May 30 '14 at 22:46

1

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.

edited May 30 '14 at 22:46

Josh Crozier

233,099
56
391
304

answered May 30 '14 at 22:06

makat

154
1
3
14

1

he wants the image size to be fluid as well as its position – MilkyTech May 30 '14 at 22:09
hmm okay i changed the fiddle abit, is this what you meant? : http://jsfiddle.net/bobi22/E7Rfa/4/ – makat May 30 '14 at 22:23
Michaelm. You just replicated my problem. The width is fluid but not the height. – Benjamin Jones May 30 '14 at 22:24
1

okay, how about now? http://jsfiddle.net/bobi22/E7Rfa/5/ play with it's window to check the height and width fluidness notice i did make the height fluid yet maxed it up to certain amout of pixels so the image won't distort (even tho it's just a square block) – makat May 30 '14 at 22:28
happy to help, let me know if you need some help on tweaking it for your image. – makat May 30 '14 at 22:39

CSS Fluid Image issue

1 Answers1