ionic 2 - Использование эскизов и аватаров внутри ионного слайда

In, Ionic 2, внутри «ион-слайд» не отображает аватар и уменьшенные изображения в аватаре и размерах эскизов, вместо этого он отображается в больших размерах.ionic 2 - Использование эскизов и аватаров внутри ионного слайда

Мой код:

<ion-slides> 
    <ion-slide> 
     <ion-item class="item item-trns item-stable"> 
      <ion-avatar item-left> 
       <img src="http://placehold.it/300x300" class="avatarImage"/> 
      </ion-avatar> 
      <ion-avatar item-right> 
       <img src="http://placehold.it/300x300" class="avatarImage"/> 
      </ion-avatar> 
     </ion-item> 
    </ion-slide> 
    </ion-slides> 

SCSS: 
.avatarImage { 
    width: auto; 
    height: auto; 
}

Не можем ли мы использовать аватар внутри ионно-горкой в ионном 2?

источник

2016-10-16 Viswa

Вам необходимо изменить ширину изображения: от ширины до 100%: авто.

источник

2016-10-16 04:25:09 Ash

Благодаря @Aswathy Нат J, я пытался, но не повезло. – Viswa

можно ли прикрепить скриншот контрольного элемента - f12 в chrome dev tool – Ash

, вы были правы. .swiper-slide img { ширина: авто; высота: авто; max-width: 100%; max-height: 100%; } – Viswa

Есть ли способ, чтобы удалить max-width свойство из SCSS по умолчанию, так что я бы требовать только эти два свойства:

{ 
    width: auto; 
    height: auto; 
}

источник

2016-10-16 20:45:42 Viswa

попробуйте 'width: auto! Important;' или переопределите свойство max-width' – Ivaro18

Вместо

<ion-avatar item-left> 
    <img src="http://placehold.it/300x300" class="avatarImage"/> 
</ion-avatar>

сделать это:

<ion-thumbnail item-left class="avatarImage"> 
    <img src="http://placehold.it/300x300"> 
</ion-thumbnail>

источник

2016-11-30 19:47:25 DroidHeaven

<ion-item-group> 
<ion-item-divider color="light">PHOTOS<span style="float:right;">MORE</span> 
</ion-item-divider> 
</ion-item-group> 


<ion-scroll scrollX="true" class="ion-scroll-thumbnail">   
<img width="90" height="90" class="avatarImage"

SRC = "http://www.wormsandgermsblog.com/files/2009/02/PETS_0803_dog_bath1.jpg">

<img width="90" height="90" class="avatarImage" src="http://www.wormsandgermsblog.com/files/2009/02/PETS_0803_dog_bath1.jpg"> 

<img width="90" height="90" class="avatarImage" src="http://www.wormsandgermsblog.com/files/2009/02/PETS_0803_dog_bath1.jpg"> 

<img width="90" height="90" class="avatarImage" src="http://www.wormsandgermsblog.com/files/2009/02/PETS_0803_dog_bath1.jpg"> 

</ion-scroll> 

/* CSS */ 

.ion-scroll-thumbnail { 
white-space: nowrap; 
height: 90px; 
}

источник

2017-04-27 05:16:44

ionic 2 - Использование эскизов и аватаров внутри ионного слайда

ответ

Смежные вопросы