Geek Answers Handbook

Fluid images: how to set width and height?

I am trying to create a fluid layout for which I am creating large images with:

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

This works great, 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 these attributes, so the browser can “save” the space needed for the image until it loads, so the rest of the page does not move when the image loads.

Is there a way to have both functions? (fluid image + space is saved until the image is loaded)

+5
source share
7 answers

. max-width, width= height= , , .

jQuery. width= height= <img>.

CSS

img { max-width: 100%; height: auto; }

HTML:

<img src="image.png" width="400" height="300" />

JQuery

$('img').each(function() { 
    var aspect_ratio = $(this).attr('height') / $(this).attr('width') * 100;
    $(this).wrap('<div style="padding-bottom: ' + aspect_ratio + '%">');
});

, : http://andmag.se/2012/10/responsive-images-how-to-prevent-reflow/

+2

div img , :

#myimage {
 background: url(yourimage);
 width: 100px;
 height:200px;
 display:inline-block;
}


  <div id="myimage"></div>

html.

0

jquery .

0

. CSS ( , ), <head> ( ), , . , , , - .

1) , script, . <script>vdivid.style.width = 'auto'</script>

2) <img> , <div> . , . `

3) - , .

4) , , , . #fluiddiv {width:20%;height:20%;}, . em %. em flex , % flex ( , ). , ... , %, em , .

0

, . , . : ;

: inline-block , , :

.myimage {
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline;
}

:

<img class="myimage" style="width:100px;height:200px">

!:)

-1

div , .

, , , , .

-1

:

 <img class="fluid_img" src="..." style="width: 50px; height: 100px;">

Inline styles override any styles that are bound to the liquid_img class based on priority . You can see this by going to CSS in Firebug / Chrome and looking at which styles apply to yours img.

Alternatively, you can use the following jQuery if this helps when you dynamically insert / change images:

 $('<img>').src('...').css({width: 50, height: 100});

Hope this helps!

-2
source

More articles:


All Articles