How to make image responsive

Question

I am trying to make my image responsive.in web version it looks good but when I am trying to see my image in mobile version then it's not in responsive .please help me to find out the solution..

here is my HTML code

<html>
  <head>
    <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <div class="banner-bg">
      <div class="banner-bg-item"><img src="img/banner-bg-1.jpg" style="max-width: 100%;" alt=""></div>
      <div class="banner-bg-item"><img src="img/banner-bg-2.jpg" style="max-width: 100%;" alt=""></div>
      <div class="banner-bg-item"><img src="img/banner-bg-3.jpg" style="max-width: 100%;" alt=""></div>
      <div class="banner-bg-item"><img src="img/banner-bg-4.jpg" style="max-width: 100%;" alt=""></div>
    </div>
  </body>
</html>

and MY CSS file is

#banner .banner-bg .banner-bg-item .img{
    max-width: 100%;height: auto;display:block;width:100%;
}

I am also try by using bootstrap and make my image class img-responsive but its not working..so please help me to find the solution

what is the problem..small image or horizontal scroll...how it is no responsive? — Gaurav Aggarwal, May 09 '16 at 10:17
Responsive is a vague term that just means "Adapts in some way to different screen sizes". What, *specific* behaviour are you expecting and how does that differ from what actually happens? — Quentin, May 09 '16 at 10:18
I want full image in mobile but in chrome developer tools when i make it mobile then image is cutting. not showing full and goes in vertically. — Safiq Khan, May 09 '16 at 10:22
Check for @media properties of CSS helpful link : http://stackoverflow.com/questions/13847755/css-media-queries-for-screen-sizes — Shubham, May 09 '16 at 10:22
Shubham singhal. The link which you provide there is one answer who got 53 up and he say that Put it all in one document and use this ..so please help me how i used that query in my file ..please help me — Safiq Khan, May 09 '16 at 10:28
@SafiqKhan you need to show live example that will help us more to understand your problem — Adnan Akram, May 09 '16 at 10:54
How I provide you live example because i am working on localhost and I dont know how to create live in jsfiddle..please help me to create live example — Safiq Khan, May 09 '16 at 10:57
@SafiqKhan you can add your code in http://jsfiddle.net/ and provide a link here — Adnan Akram, May 09 '16 at 11:10

score 0 · Answer 1 · answered May 09 '16 at 12:14

0

Instead of max-width, put these two:

<img width=100% height=100% />

answered May 09 '16 at 12:14

How to make image responsive

1 Answers1