Responsive Images with CSS

Question

I m finding it tricky to resize images to make them responsive   I m developing a php application to automatically convert a website to a responsive version  I m a little stuck on the images   I ve successfully added a wrapper class to every image on a website and can re-size the images quite well   My issue lies with images that are naturally smaller than the the window  such as logos and icons  I don t want to resize these   My code currently converts    lt img src   src     gt    into    lt div class  erb-image-wrapper  gt       lt img src   src     gt   lt  div gt    Where I use the following CSS    erb-image-wrapper      max-width 90       height auto      position  relative      display block      margin 0 auto     erb-image-wrapper img      width 100   important      height 100   important      display block      This resizes all images  but I only want it to resize images that are over the width of the page  Is the a way I can achieve this via CSS

User · Answer

the best way i found was to set the image you want to view responsively as a background image and sent a css property for the div as cover   background-image   url  YOUR URL    background-size   cover

User · Answer

Use max-width on the images too  Change    erb-image-wrapper img      width 100   important      height 100   important      display block      to      erb-image-wrapper img      max-width 100   important      max-height 100   important      display block

User · Answer

Use max-width 100    height  auto  and display block  as follow   image       max-width 100       height  auto      display block

User · Answer

erb-image-wrapper img      max-width 100   important      height auto      display block      Worked for me  Thanks for MrMisterMan for his assistance

User · Answer

check the images first with php if it is small then the standerd size for logo  provide it any other css class and dont change its size  i think you have to take up scripting in between

User · Answer

um responsive is simple    first off create a class named cell give it the property of display table-cell  then   max-width 700px do  display block  width 100   clear both     and that s it no absolute divs ever  divs needs to be 100  then max-width  - desired width - for inner framming  A true responsive sites has less than 9 lines of css anything passed that you are in a world of shit and over complicated things    PS   reset css style sheets are what makes css blinds there was a logical reason why they gave default styles in the first place

[css] Responsive Images with CSS

Examples related to css

Examples related to image

Examples related to responsive-design