Question

我正在使用ng-lazyload-image在图像插入卡中之前先进行微调。问题是，微调框的大小确实比为图像保留的卡片位置大。我不是css pro。有人可以帮我调整大小吗？

我使用的默认图像：

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

Answer 1

尝试以下代码：

<img alt="Image 1" src="https://www.solodev.com/assets/lazy-load-with-echo/image-loader.gif" data-echo="https://www.solodev.com/assets/lazy-load-with-echo/image1.jpg">

调整ng-lazyload-image的大小

1 个答案: