Make an image responsive - the simplest way

Question

I notice that my code is responsive  in the fact that if I scale it down to the size of a phone or tablet - all of the text  links  and social icons scale accordingly   However  the ONLY thing that doesn t is my image in the body  which is wrapped in paragraph tags    with that being said  is there a simple way to make the image responsive as well   Here s the code that I used to have my image show in the body    lt body gt       lt  center gt           lt p gt  lt a href  MY WEBSITE LINK  target   blank  gt  lt img src  IMAGE LINK  border  0  alt  Null  gt  lt  a gt  lt  p gt       lt  center gt   lt  body gt

User · Answer

To make all images on your website responsive, don't change your inline HTML from correct markup, as width:100% doesn't work in all browsers and causes problems in Firefox. You want to place your images on your website how you normally should:

<img src="image.jpg" width="1200px" height="600px" />

And then add to your CSS that any image max-width is 100% with height set to auto:

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

That way your code works in all browsers. It will also work with custom CMS clients (i.e. Cushy CMS) that require images to have the actual image size coded into the inline HTML, and it is actually easier this way when all you need to do to make images responsive is simply state in your CSS file that the max-width is 100% with height set to auto. Don't forget height: auto or your images will not scale properly.

User · Answer

I m using this technique to keep the logo as responsive for mobile devices as a simple way  The logo will resize automatically   HTML   lt div id  logo wrapper  gt     lt a href  http   example com  target   blank  gt       lt img src  http   example com image jpg  border  0  alt  logo    gt     lt  a gt   lt  div gt    CSS   logo wrapper img     max-width  100     height  auto

User · Answer

Set height or the width of the image to be  100   There is more in Stack Overflow question How do I auto-resize an image to fit a   39 div  39  container

User · Answer

Width  100  will break it when you view on a wider are   Following is Bootstrap s img-responsive  max-width  100    display block   height  auto

User · Answer

I would also recommend to use all the CSS properties in a different file than the HTML file  so you can have your code organized better   So to make your img responsive  I would do   First  name your  lt img gt  tag using a class or id attribute in your HTML file    lt img src  IMAGE LINK  border  0  class  responsive-image  alt  Null  gt    Then  in my CSS file I would make the changes to make it responsive    responsive-image     height  auto    width  100

User · Answer

Images should be set like this  img   max-width  100

User · Answer

I use this all the time  You can customize the img class and the max-width property   img      width  100       max-width  800px      max-width is important  Otherwise your image will scale too much for the desktop  There isn t any need to put in the height property  because by default it is auto mode

User · Answer

Instead of adding CSS to make the image responsive  adding different resolution images w r t  different screen resolution would make the application more efficient   Mobile browsers don t need to have the same high resolution image that the desktop browsers need   Using SASS it s easy to use different versions of the image for different resolutions using a media query

User · Answer

Use Bootstrap to have a hustle free with your images as shown  Use class img-responsive and you are done    lt img src  cinqueterre jpg  class  img-responsive  alt  Cinque Terre  width  304  height  236  gt

User · Answer

You can try doing   lt p gt     lt a href  MY WEBSITE LINK  target   blank  gt       lt img src  IMAGE LINK  style  width 100    border  0  alt  Null  gt     lt  a gt   lt  p gt    This should scale your image if in a fluid layout   For responsive  meaning your layout reacts to the size of the window  you can add a class to the image and use  media queries in CSS to change the width of the image   Note that changing the height of the image will mess with the ratio

User · Answer

If you are constrained to using an  lt img gt  tag   I ve found it much easier to set a  lt div gt  or any other element of your choice with a background-image  width  100  and background-size  100    This isn t the end all be all to responsive images  but it s a start  Also  try messing around with background-size  cover and maybe some positioning with background-position  center   CSS    image-container    height  100      It doesn t have to be      It can also use  px        width  100     margin  0 auto    padding  0     background-image  url    img exampleImage jpg     background-position  top center    background-repeat  no-repeat    background-size  100       HMTL    lt div class  image-container  gt  lt  div gt

User · Answer

To make an image responsive use the following   CSS   responsive-image           width  950px   Any width you want to set the image to          max-width  100           height  auto      HTML   lt img class  responsive-image  src  IMAGE URL  gt

[html] Make an image responsive - the simplest way

Examples related to html

Examples related to css

Examples related to image

Examples related to mobile