Ionic framework Ionic2中的类=圆形图像是什么

我不是程序员，就像我的人离开时那样，我被留下来调试代码：

目前在一个离子项目中，我有一个离子化身，它显示了一个圆形图像。据我所知，它正在使用class=“round\u 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>

事件
男人
女人
二者都
{{group.label}}
{{event.title}}
作者：{{（event.user | async）？.name}

{{event.category}

我建议您学习HTML和CSS的基础知识。查看此链接

现在，回到你的问题上来

2个选项

一,

删除

class=“round image”

，因为我相信默认情况下

ion缩略图将被平方，如果不是这样，请转到2

二,

您的页面称为“事件”，因此根据程序员的干净程度，应该有
Events.scss
、
Events.component.scss
或
Events.css
文件

scss
和
css
用于设置页面样式。因此，如果你有一个圆形图像，它将在这里定义

在该文件中（如果存在，则隐藏在其他
scs
或
css
文件中），应该有一个
.round image
（ctrl+f->.round image）。将有一个名为
边界半径
的属性。这是边界将“弯曲”的量。因此，将其设置为0将创建一个方形/矩形图像

如果它们是长方形，而你希望它是正方形，你可以使用这个问题，因此提供的答案将防止你的图像“挤压”*

*挤压示例：如果是高于宽度的轮廓图像，则当您将轮廓图像强制成正方形时，轮廓图像中的人看起来会很胖
 我建议您学习HTML和CSS的基础知识。查看此链接

现在，回到你的问题上来

2个选项

一,

删除
class=“round image”
，因为我相信默认情况下
ion缩略图将被平方，如果不是这样，请转到2

二,

您的页面称为“事件”，因此根据程序员的干净程度，应该有
Events.scss
、
Events.component.scss
或
Events.css
文件

scss
和
css
用于设置页面样式。因此，如果你有一个圆形图像，它将在这里定义

在该文件中（如果存在，则隐藏在其他
scs
或
css
文件中），应该有一个
.round image
（ctrl+f->.round image）。将有一个名为
边界半径
的属性。这是边界将“弯曲”的量。因此，将其设置为0将创建一个方形/矩形图像

如果它们是长方形，而你希望它是正方形，你可以使用这个问题，因此提供的答案将防止你的图像“挤压”*

*挤压示例：如果是高于宽度的轮廓图像，则当您将轮廓图像强制成正方形时，轮廓图像中的人看起来会很胖
 看起来您应该删除
class=“圆形图像”



应该是

<ion-thumbnail item-right>

看起来您应该删除
class=“round image”



应该是

<ion-thumbnail item-right>


这并没有回答他的“Ionic2中什么是类=圆形图像”和“圆形图像来自何处”是的，请参阅我对Ivaro的上述评论。我试图删除，但图像只是消失，没有出现。这让我觉得图像圆可能是一个离子类！对你需要像@Ivaro18建议的那样在chrome中进行检查。这并没有回答他的“Ionic2中的类=圆形图像是什么”和“圆形图像来自哪里”是的，请参阅我对Ivaro上面的评论。我试图删除，但图像只是消失，没有出现。这让我觉得图像圆可能是一个离子类！对您需要像@Ivaro18建议的那样在chrome中进行检查。谢谢您的详细回答。我应该提到，我对HTML/CSS非常熟悉，可以尝试这样做。至于你的回答，两者都不起作用（因此我的问题）。1-当我删除class=“round image”没有图像渲染2-我看过SCS，没有提到round image事实上，我看过我的整个ionic文件夹库，我找不到任何对“round image”的引用。。。这让我想知道它是否是默认的ionic2类，类似于item right有什么想法吗？好的，在chrome中，右键单击图像并“检查元素”，在那里你可以看到图像应用了什么样式。然后就是找到正确的样式并删除/编辑它。看起来这些样式来自一个名为main.css的文件。问题是main.css是在终端中运行“离子服务”后生成的文件。有没有一种方法可以跟踪生成main.css的文件？没有。所有的scss文件都转换成main.css。你需要检查scss文件中的round image类，或者你可以从开发者控制台复制样式并将其重写到一个名为square image的类中，只需释放边界半径就可以了@Ivaro18-非常感谢你的帮助谢谢你给出了完整的答案。我应该提到，我对HTML/CSS非常熟悉，可以尝试这样做。至于你的回答，两者都不起作用（因此我的问题）。1-当我删除class=“圆形图像时