Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I'm trying to build a fluid layout, for which I am styling big images with:

.fluid_img {
  height: auto;
  width: auto;
  max-width: 100%;
}

This works fine, the problem is that I can no longer use the width and height attributes in the html img tag (they will have no effect). I need those attributes so the browser can "save" the space needed for the image before it has been loaded, so the rest of the page don't move when the image is loaded.

Is there any way to have both features? (fluid image + space saved before image load)

share|improve this question
1  
this seems more about html/css than graphic design? –  Damon Aug 15 '11 at 3:36
1  
2  
@Damon: Just to point out to the FAQ HappyDesigner refers to: Web Design is included in the "yes" list. Only HTML that does NOT include CSS is on the "no" list. –  Aᵂᴱ Aug 15 '11 at 12:24
    
You may want to try stackoverflow. –  chrisjlee Aug 15 '11 at 15:45
    
Web design is on-topic here in GD with particular guidelines that this question meets, per the FAQ. –  Philip Regan Aug 15 '11 at 16:22

5 Answers 5

up vote 2 down vote accepted

No, because you're setting the absolute dimensions in HTML. Those cannot change like your image will, so it's not realistic.

The most reasonable way I can think is to load the image into JavaScript. Then determine how large it has grown to "fit" into the fluid grid. Then you can apply these numbers as new width="" and height="" attributes in HTML. This is fairly roundabout, though. So I wouldn't recommend it!

I may be glossing over some other ideas so you may wish to check Google. But from your description I don't think you can have a fluid image with direct width/height attribs in HTML.

share|improve this answer
    
Please look at my answer, this post is incorrect. –  Pascal Klein Apr 12 '13 at 10:17

Let's try this:

  1. make background background-size:cover; It will stretch the image as wide as possible(while keeping the aspect ratio.)

  2. Height to be min-height:100%; -this will make it 100% of its parent div.

  3. Same with width min-width:100%;

Tips:

-to save like on speed you may wanna use different images for different devices. One way to do it is make a huge image then just use it for everything so for no matter how small the screen is it will always scale down but that would cause 4in mobile screen to download a wallpaper of 27 in monitor for no reason. Fast sites are important in Google search. So yea.

-not in all conditions i'd want my images to scale down with the size of devices. Let's say there is image with some text on it, and i rather scroll left and right to read it then not be able to read it because it was re-sized as such that it left and right fits the whole screen and thus the text is barely visible let alone readable.

share|improve this answer
    
jsfiddle.net/VYFSe –  Muhammad Umer Mar 21 '13 at 3:37
    
try resizing it: you will see it works. To resize drag the dividers that divide html/css/result sections... –  Muhammad Umer Mar 21 '13 at 3:38
    
Or how about this jsfiddle.net/hrKy8/1 –  Muhammad Umer Mar 21 '13 at 3:52

The other answers are plain incorrect. With the help CBroe I found a solution: http://stackoverflow.com/questions/15520623/browser-image-layouting-in-css-before-image-loaded-with-whole-width-and-proporti

Basically you make use of the fact that padding values given in percentage always are calculated based on the width of an element, even for padding-top/-bottom.

<div style="position:relative; width:100%; height:0; padding-top:50%;">
  <img style="position:absolute; top:0; left:0; width:100%;" src="…">
</div>

You need to calculate padding-top yourself beforehand and it represents the aspectio ratio of your image, basically: height/width*100. So you would need php or whatever scripting language you use to calculate this aspect ratio. Other than that it works like a charm an no javascript is necessary.

share|improve this answer

"so the rest of the page don't move when the image is loaded."

While that's a nice thing to achieve, it's really not doable in your situation, as your image is going to be sized based on the available space it has. It's the reverse logic of your typical fixed-sized image layout.

I wouldn't worry too much about having the page rearrange as it renders. That's how the web works. People are used to it.

share|improve this answer
1  
+1 that should be it's own question on this site... "How do I learn to accept the shortcomings of the medium when my design cannot be presented in as controlled a manner as I would prefer?" –  Farray Aug 16 '11 at 1:24
    
Nevermind, I already found my solution in javascript. You guys are too conformist. –  HappyDesigner Aug 16 '11 at 10:40
1  
Javascript to manipulate the page layout based on image sizes won't execute until after the images load, so you're likely slowing down the rendering of the page with that solution. We're not conformist. We're pragmatic. That's an important distinction. –  DA01 Aug 16 '11 at 14:08
    
You keep telling yourself that =) –  HappyDesigner Aug 20 '11 at 21:04
    
"I wouldn't worry to much..." is the wrongest answer anybody could give. Especially for mobile websites relayouting of the page can make a huge difference and decreases the usability. –  Pascal Klein Mar 20 '13 at 10:41

You're correct that you cannot set HTML width/height properties since the class will override them. However, if you set the style property you can override the CSS class.

If you need to "reserve space" so your layout doesn't get re-calculated mid-render, consider using min-height and min-width in the style tag on the IMG elements.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.