ionic 2 - использование эскизов и аватара внутри ion-slide

#css #ionic-framework #ionic2

Вопрос:

В Ionic 2 внутри «ion-slide» не отображаются изображения аватаров и миниатюр в размерах аватара и миниатюр, вместо этого они отображаются в больших размерах.

Мой код:

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

Нельзя ли использовать аватар внутри ion-slide в ionic 2?

Ответ №1:

вам нужно изменить ширину изображения с width: 100% на width: auto.

1. возможно ли прикрепить скриншот элемента проверки — f12 в chrome dev tool

2. вы были правы. .swiper-слайд img { ширина: авто; высота: авто; максимальная ширина: 100%; максимальная высота: 100%; }

3. как удалить / переопределить максимальную ширину: ? где переопределить?

4. В css, .поместите эту строку в последнюю строку swiper-slide img {max-width:auto;}

Ответ №2:

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

 {
    width: auto;
    height: auto;
}

Ответ №3:

Вместо

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

Ответ №4:

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