why the image not take full width in %?

Question

I am trying to make small page in html. I am able to do that. But it look good when plunker screen is small. Example: when you run the project it look fine. But when user run on full screen it look awkward.

here is image what I am trying to do
http://plnkr.co/edit/Cz10CYGKBBkG0oT0eO6C?p=preview

here is my code http://plnkr.co/edit/Cz10CYGKBBkG0oT0eO6C?p=preview

Actually When user run on full screen I notice these thing ?

• Why is the image not taking 35% width
• is it the way to design the layout or I am doing wrong to design the things

• what to do to design responsive layout

  <ion-header-bar class="bar-assertive">
  
      <img src="https://dl.dropboxusercontent.com/s/bt3rzcwpe80r6fs/sapient-logo.png?dl=0" class="logo">
  
      <div class="barTab">
          <a>Home</a>
          <a>About us</a>
          <a>Projects</a>
          <a id="contactus">Contact Us</a>
      </div>
  </ion-header-bar>
  
  <ion-content>
      <div id="wrapper">
          <div id="header">
              <h1> Contact us</h1>
          </div>
          <div id="slideTest">
  
              <ion-slide-box pager-click="doSomething(index)">
                  <ion-slide ng-repeat="n in success">
                      <img src={{n.image}}>
                  </ion-slide>
  
              </ion-slide-box>
  
          </div>
          <div id="rightContainer">
              <div id="textContainer">
  
                  What you’ve already accomplished is important. But, we’re interested in what you’re going to do next. At Sapient Global Markets, we bring together the brightest minds in the financial industry and set the stage for innovation and excellence. Given the right environment, the best tools and an incredible team to work with, what can you achieve?
              </div>
              <div id="formID">
                  <div class="list list-inset">
                      <label class="item item-input">
                          <input type="text" placeholder="First Name">
                      </label>
                      <label class="item item-input">
                          <input type="password" placeholder="Password">
                      </label>
                      <label class="item item-input">
                          <input type="password" placeholder="Confirm Password">
                      </label>
                      <label class="item item-input">
                          <input type="email" placeholder="Email">
                      </label>
                      <label class="item item-input">
                          <input type="text" placeholder="website">
                      </label>
  
                  <button class="button frmbtn">
                      submit
                  </button>
                  </div>
  
              </div>
          </div>
      </div>
  </ion-content>
  

Answer 1

• #slideTest - remove height: 100px;, add overflow: hidden;
• .slider-slide - remove height: 100%;
• .slider-slides - remove height: 100%;, add overflow: hidden;
• .slider - add overflow: hidden;

• List item

  .slider-slide img{ width: 100%; height: auto; }

-

.slider-slide{
  height: auto;
}
.slider-slides{
   height: auto;
   overflow: hidden;
}
.slider{
  overflow: hidden;
}
.slider-slide img{
 width: 100%;
 height: auto;
}

Answer 2

Have you tried? :

ion-slide img {
    max-width: 100%;
    display: block;
    height: auto;
    width: 100%;
}

Answer 3

http://plnkr.co/edit/3fu32oUq47KSmli6TP2p?p=preview

Add these rules

.slider-slides img {
  width: 100%;
  height: auto;
}
.slider-pager {
    background: rgba(255,255,255,0.7);
}

The latter to make the controls visible.

Answer 4

You might want to add the following css to your code, though there is still a problem with the responsive height.

.slider-slide img {
  width:100%;
}

http://plnkr.co/edit/dUvIbYDxH27o81NKJ8dg?p=preview

Answer 5

The actual image you used is 202px wide, while the space you want to occupy if 210px wide. If you want the image to cover that area, you can make the image itself larger and it will do that automatically.

Also, you can specify width: 100% in CSS for the img tag. But as long as the image is smaller, it will be streched and that won't look as nice as having a proper sized source image.

So I think the best solution is to do both. Set the proper size through CSS and make the source image large enough to cover that area completely.