How can i change ion-slides height

[umefarooq]

i want to use height of 200px for ion-slides i have put ion-slide in a div which has height of 200px but problem is it is show extra space below slider, i want to remove that space. you can see red color is extra space below image. below preview is from ios simulator

here is my slider code

<div class="header-banner">
        <ion-slides class="home-slide" autoplay="3000" loop>
          <ion-slide>
            <img src="https://unsplash.it/400/200/?image=1080" alt="">
          </ion-slide>
          <ion-slide>
            <img src="https://unsplash.it/400/200/?random" alt="">
          </ion-slide>
          <ion-slide>
            <img src="https://unsplash.it/400/200/?image=976" alt="">
          </ion-slide>
        </ion-slides>
    </div>

here is my scss

page-home {
	.header-banner{
		
		height:200px;
		min-height:200px;
		background:red;
	}

	.slide-zoom {
		// height:200px;
		height: 100%;
		// overflow:hidden;
	}
}

[umefarooq]

anybody who can help me to solve this problem

[philipgriffin]

Try adding this:

page-home {
	.header-banner{
		
		height:200px;
		min-height:200px;
		background:red;
	}

	.slide-zoom {
		// height:200px;
		height: 100%;
		// overflow:hidden;
	}

       ion-slides {
          height: 200px;
       }
}

[umefarooq]

@philipgriffin thanks for reply, after so many experiments at last fond solution, its image which is creating problem, I’m using 400px width image which is casing problem on smaller screens, on screen > 350px it work fine on smaller screen it was creating problem because image adjusting its height accordingly, no i am using for mobile 500px width image height is 200px work fine for me no need to add height or min-heigh to containers its work fine below screen shot taken on 6s simulator you can see small red line i want keep this much space any way.