почему изображение не занимает полную ширину в%?

0

Я пытаюсь сделать небольшую страницу в html. Я могу это сделать. Но он выглядит хорошо, когда экран плунжера маленький. Пример: при запуске проекта он выглядит нормально. Но когда пользователь работает на полном экране, это выглядит неудобно.

вот образ, что я пытаюсь сделать
Изображение 174551http://plnkr.co/edit/Cz10CYGKBBkG0oT0eO6C?p=preview

вот мой код http://plnkr.co/edit/Cz10CYGKBBkG0oT0eO6C?p=preview

На самом деле, когда пользователь запускается в полноэкранном режиме, я замечаю эту вещь?

  • Почему изображение не занимает 35% ширины
  • это способ дизайна макета, или я делаю неправильно, чтобы проектировать вещи
  • что делать, чтобы разработать гибкую компоновку

    <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>
    

Теги:
ionic-framework

5 ответов

1
Лучший ответ

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

Добавьте эти правила

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

Последний, чтобы сделать элементы управления видимыми.

0
  • #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;
}
  • 0
    Добавьте эти стили, чтобы сделать слайдер чувствительным к высоте.
0

Фактическое изображение, которое вы использовали, имеет ширину 202 пикселя, а пространство, которое вы хотите занять, если ширина 210 пикселей. Если вы хотите, чтобы изображение покрывало эту область, вы можете сделать изображение более крупным, и оно будет делать это автоматически.

Кроме того, вы можете указать width: 100% в CSS для тега img. Но пока изображение меньше, оно будет растянуто, и это будет выглядеть не так хорошо, как иметь исходный образ соответствующего размера.

Поэтому я считаю, что лучшим решением является то, и другое. Установите правильный размер с помощью CSS и сделайте исходное изображение достаточно большим, чтобы полностью покрыть эту область.

  • 0
    но если у меня слишком большой экран, я имею в виду другое разрешение, чем у меня, второй вариант верен. потому что невозможно сделать изображения другого размера
0

Возможно, вы захотите добавить следующий код css в свой код, хотя по-прежнему существует проблема с чувствительной высотой.

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

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

  • 0
    какое решение по высоте?
0

Ты пробовал? :

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню