Question

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

我们不能在离子2中使用离子载体内的化身吗？

Answer 1

您需要将图像宽度从宽度更改为：100％更改为宽度：自动。

Answer 2

有没有办法从默认的SCSS中删除function replaceOne(str1, str2){ var arr = str2.split(","); var newStr = ""; for(var i=0; i<arr.length; i++){ if(arr[i]!=str1){ newStr = (newStr=="")?arr[i]:newStr+","+arr[i]; } } console.log(newStr);属性，因此我只需要这两个属性：

max-width

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

Answer 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 =＆＃34; HTTP：//www.wormsandgermsblog.com/files/2009/02/PETS_0803_dog_bath1.jpg"＆GT;

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

离子2 - 在离子滑动内使用缩略图和头像

4 个答案: