Question

原始图像不是二次方的。目前我的缩略图是扭曲的。如何创建裁剪缩略图？ CSS样式似乎没有效果。

<ion-thumbnail item-start style ="object-fit: cover;">
   <img src={{item.img}}>
</ion-thumbnail>

Answer 1

您必须使用适合img元素的对象。

<nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="collapse navbar-collapse w-100 order-1 order-lg-0" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> <div class="d-flex w-100 order-0"> <div class="w-100"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> </div> <a class="navbar-brand text-center w-100" href="#">Navbar</a> <span class="w-100"></span> </div> <span class="w-100"></span> </nav>

<ion-thumbnail item-start> <img class="fit-thumbnail" src="{{video.thumbnail}}" alt=""> </ion-thumbnail>

离子缩略图裁剪

1 个答案: