Я использую ng-lazyload-image, чтобы иметь счетчик до того, как изображение окажется на карте.Проблема в том, что размер счетчика действительно больше, чем место для карты, сэкономленное для изображения.Я не профессионал CSS.Может ли кто-нибудь помочь мне изменить размер, пожалуйста?
Изображение по умолчанию, которое я использую:
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#333">
<g fill="none" fill-rule="evenodd">
<g transform="translate(1 1)" stroke-width="2">
<circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
<path d="M36 18c0-9.94-8.06-18-18-18">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="1s"
repeatCount="indefinite"/>
</path>
</g>
</g>
</svg>
Карта для events в моем приложении:
<div *ngFor="let event of events" class="item col-xs-12 col-sm-6 col-md-4 col-lg-3">
<a class="block box card-item b-a event-item text-left" target="_blank" href="{{event?.community.url}}/{{event?.community.domain}}/default/events/view/{{event?.slug}}" title="{{event.title}}">
<span class="block clear img-card b-b b-light text-center event-image" defaultImage="/assets/images/loader-black.svg" [lazyLoad]="event.image"></span>
.......extra part .......
</a>
</div>
Я пытался:
.event-image.ng-lazyloaded:not(.ng-failed-lazyloaded) {
height:32px;
width:32px;
background-position: 50% 50%;
background-size: cover;
}