相关疑难解决方法(0)

我需要始终使用CSS将随机大小的图像裁剪为正方形160x160.裁剪后图像应保持居中.

我的标记应该是:

<a href="#" class="cropper">
   <img src="image" alt="description" />
</a>

搜索在计算器上我找到了一些答案(如本),但他们不为情况下,你的图像可以是更大的工作水平(宽)或垂直(高).

具体而言,我需要能够呈现一个都像这样宽的图像和类似这样的高图像在正方形的形式,没有预先知道哪一个是呈横长方形或垂直矩形.它还应该支持已经平方的图像.

我object-fit: cover;在我的CSS中使用特定页面上的图像,因为他们需要坚持相同height.它适用于大多数浏览器.

但是当在IE或Edge中缩放浏览器时,图像会调整width(而不是height)缩放而不是缩放.图像变形了.

我可以使用什么CSS规则来解决这个问题？

这是页面

我想创建一个垂直时间轴,我遇到了这个页面.

http://cssdeck.com/labs/oz2nu681

我复制了代码,有些东西我遇到了麻烦.

• &::后
• &::之前
• .radio:检查; &+ .relative;

我试图将其更改为样式表代码,但卡在这里.此外,css代码与传统的css文件包含的不同.这段代码是什么,我该如何使用它？

我有一个放在div中的图像,div有圆角,用作遮罩隐藏图像角并将其显示为圆形.除Safari外,它适用于所有浏览器!有谁知道如何解决它？

我试过了-webkit-padding-box,-webkit-mask-box-image但两个都没用.

HTML:

<div class="cat"><img src="images/colorful-flowers-hd-wallpaper.jpg" /></div>

CSS:

.cat{
    width: 128px;
    height: 128px;
    margin: 20px 96px 0px 96px;
    position: relative;
    float: left;
    border-radius: 50%;
    overflow: hidden;
    border-top: 1px solid #111;
    border-bottom: 1px solid #fff;
    background: #fff;
    -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
}

.cat img{
    position: absolute;
    border: none;
    width: 138px;
    height: 138px;
    top: -8px;
    left: -8px;
    cursor: pointer;
}

小提琴

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

目前在离子项中我有一个离子化身,它显示一个圆形图像.尽我所知,它使用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 | …