Я пытаюсь сделать небольшую страницу в html. Я могу это сделать. Но он выглядит хорошо, когда экран плунжера маленький. Пример: при запуске проекта он выглядит нормально. Но когда пользователь работает на полном экране, это выглядит неудобно.
вот образ, что я пытаюсь сделать
http://plnkr.co/edit/Cz10CYGKBBkG0oT0eO6C?p=preview
вот мой код http://plnkr.co/edit/Cz10CYGKBBkG0oT0eO6C?p=preview
На самом деле, когда пользователь запускается в полноэкранном режиме, я замечаю эту вещь?
что делать, чтобы разработать гибкую компоновку
<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 youve already accomplished is important. But, were interested in what youre 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>
http://plnkr.co/edit/3fu32oUq47KSmli6TP2p?p=preview
Добавьте эти правила
.slider-slides img {
width: 100%;
height: auto;
}
.slider-pager {
background: rgba(255,255,255,0.7);
}
Последний, чтобы сделать элементы управления видимыми.
#slideTest
- удалить height: 100px;
, добавить overflow: hidden;
.slider-slide
- удалить height: 100%;
.slider-slides
- удалить height: 100%;
, добавить overflow: hidden;
.slider
- добавить overflow: hidden;
Элемент списка
.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;
}
Фактическое изображение, которое вы использовали, имеет ширину 202 пикселя, а пространство, которое вы хотите занять, если ширина 210 пикселей. Если вы хотите, чтобы изображение покрывало эту область, вы можете сделать изображение более крупным, и оно будет делать это автоматически.
Кроме того, вы можете указать width: 100%
в CSS для тега img
. Но пока изображение меньше, оно будет растянуто, и это будет выглядеть не так хорошо, как иметь исходный образ соответствующего размера.
Поэтому я считаю, что лучшим решением является то, и другое. Установите правильный размер с помощью CSS и сделайте исходное изображение достаточно большим, чтобы полностью покрыть эту область.
Возможно, вы захотите добавить следующий код css в свой код, хотя по-прежнему существует проблема с чувствительной высотой.
.slider-slide img {
width:100%;
}
Ты пробовал? :
ion-slide img {
max-width: 100%;
display: block;
height: auto;
width: 100%;
}