How to put an image in div with CSS

Question

I would like to have all my images in CSS  the only way I know how is to put them in as background images    But the problem in this solution is you can never let the div take the size of the image   So my question is  what is the best way to have the equivalent of   lt div gt  lt img src         gt  lt  div gt  in CSS

User · Accepted Answer

This answer by Jaap      lt div class  image  gt  lt  div gt     and in CSS     div image      content url http   placehold it 350x150        you can try it on this link   http   jsfiddle net XAh2d   this is a link about css content http   css-tricks com css-content   This has been tested on Chrome  firefox and Safari   I m on a mac  so if someone has the result on IE  tell me to add it

User · Answer

With Javascript Jquery    load image with hidden img when image has been loaded  get width and height dynamically create a div and set width  height and background remove the original img      document  ready function         var image       lt img gt         var div       lt div gt        image load function           div css            width   this width           height   this height           background-image    url     this src                           container   append div               image attr  src    test0 png

User · Answer

Take this as a sample code  Replace imageheight and image width with your image dimensions    lt div style  background yourimage jpg no-repeat height imageheight px width imagewidth px  gt   lt  div gt

User · Answer

you can do this    lt div class  picture1  gt  amp nbsp  lt  div gt    and put this into your css file   div picture1      width 100px    width of your image      height 100px    height of your image      background-image url  yourimage file       margin 0     If you want no margin       padding 0    if your want to padding        otherwise  just use them as plain

[css] How to put an image in div with CSS?

Examples related to css

Examples related to image