Qooq 記事一覧のサムネイルのサイズを変更する方法

忘れないように書いておきます。

赤字の箇所を変更。240は画像のサイズ。4:3は画像の横と縦の比 

 <img class='list-item-img' expr:src='data:post.thumbnailUrl'/>

を

<img class='list-item-img' expr:src='resizeImage(data:post.thumbnailUrl, 240, &quot;4:3&quot;)'/>

 

flex-basisはlist-item-imgのwidth、heightの大きい方のサイズにする。

.list-item-img-box{
flex-shrink: 0;
flex-basis: 72px;
}

.list-item-img-box{
flex-shrink: 0;
flex-basis: 200px;
}

縦横のサイズを指定する（赤字）

画像の角の丸み。50%は画像が丸。0%は画像が四角。

.list-item-img{

display: block;
border-radius: 50%;
width: 72px;
height: 72px;
object-fit: cover;
}

.list-item-img{

display: block;
border-radius: 0%;
width: 200px;
height: 150px;
object-fit: cover;
}

これだけだと、サムネイルがある場合と無い場合で一行の高さが違ってしまう。