Ionic2中的class = round_image是什么

Question

我不是程序员,因为我的家伙离开了,我还在调试代码:

目前在离子项中我有一个离子化身,它显示一个圆形图像.尽我所知,它使用class ="round_image"以下代码:

<ion-thumbnail class="round-image" item-right>

但是圆形图像来自哪里,我怎样才能获得规则的矩形图像？

请指教.

这是整个代码:

    <ion-title padding>Events</ion-title>

        <!--<ion-toolbar>

    </ion-toolbar>          -->

    </ion-header>

    <ion-content>


            <ion-segment [(ngModel)]="genderSegment" color="danger" padding>
                    <ion-segment-button value="men" (click)="updateGenderSegment(1)">
                        Men
                    </ion-segment-button>
                    <ion-segment-button value="women" (click)="updateGenderSegment(2)">
                        Women
                    </ion-segment-button>
                    <ion-segment-button value="both" (click)="updateGenderSegment(3)">
                        Both
                    </ion-segment-button>
                </ion-segment> 



        <ion-list text-wrap>
        <ion-item-group *ngFor="let group of groups">
            <ion-item-divider dark><h2>{{ group.label }}</h2></ion-item-divider>


            <button ion-item detail-none *ngFor="let event of group.events" [navPush]="eventDetailsPage" [navParams]="{eventId: event.$key}">


                <ion-thumbnail class="my-image" item-right>
                    <div image-cache class="photo" [ngStyle]="{ 'background-image': 'url(' + (event.user | async)?.photoURL + ')'}"></div>
                </ion-thumbnail>


                <h2><strong>{{ event.title }}</strong></h2>
                <p>By: <strong><i>{{ (event.user | async)?.name }}</i></strong></p>
                <p>{{ event.category }}</p>
            </button>
        </ion-item-group>
    </ion-list>




    <!--<ion-fab  hideWhen="ios" right bottom>
        <button ion-fab  color="danger" (click)="addEvent()">
            <ion-icon name="create" ></ion-icon>
        </button>
    </ion-fab>
    -->
    <ion-infinite-scroll (ionInfinite)="loadMore($event)">
        <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>

    </ion-content>

Answer 1

我建议你学习HTML和CSS的基础知识.查看此链接http://www.w3schools.com/

现在,回到你的问题.

2个选项.

1.

删除class="round-image"因为我认为ion-thumbnail默认情况下会被平方,如果不是这样,请转到2.

2.

您的网页被称为"事件",所以这取决于如何清洁你的程序员是,应该有一个events.scss,events.component.scss或events.css文件

scss并css用于设置您的页面样式.因此,如果你有一个圆形图像,它将在这里定义.

在该文件中(如果它存在,否则它隐藏在其他文件scss或css文件中)应该有.round-image(ctrl + f - > .round-image).将有一个叫做的房产border-radius.这是边框"曲线"的数量.因此将其设置为0将创建方形/矩形图像.

如果它们是矩形并且您希望它是一个正方形,您可以使用这个问题如何使用CSS将矩形图像"裁剪"成方形？提供的答案将阻止您的图像"压扁"*.

*Squishing示例:如果它是高于宽的轮廓图像,则当您将其强制成方形时,轮廓图像中的人看起来会很胖.