会員サイトをリニューアルしました! 新サイトはこちら

投稿リストのサムネイル表示を任意の位置にしたい < SWELLに関する質問

フォーラムをリニューアルしました!
今後は、新フォーラムをご利用ください。

投稿リストのサムネイル表示を任意の位置...
 
通知
すべてクリア

[解決済] 投稿リストのサムネイル表示を任意の位置にしたい

3 投稿
2 ユーザー
0 Likes
1,159 表示
genepine
(@genepine)
Eminent Member
Topic starter
 

こんにちは

投稿リストのサムネイル表示について

投稿リストのサムネイルはCSSで高さが指定されている
画像の高さの中心位置で切り取り

がされています。

これを任意の位置にしたいです。

例えばポスターだと、上部にイベントのタイトルや開催日が書かれているので、上位置にしたいです(添付)

CSSのクラスが .c-postThumb__img で、 position: absolute;をはずすと全体が表示されるのでどうしたらよいでしょうか。

.c-postThumb__img {
position: absolute;
top: 0;
left: 0;
-webkit-transform: scale(1.01) perspective(0);
transform: scale(1.01) perspective(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: -webkit-transform .25s;
transition: transform .25s;
transition: transform .25s,-webkit-transform .25s;
}
 
投稿済 : 10/12/2020 2:42 am
了(開発者)
(@ryo)
Illustrious Member Admin
 

CSSで調整するなら object-position 使えばいけそうな気がします。

ただ、基本的に適切なサイズ感でサムネイル画像作っていただくのが一番かなと...

 
投稿済 : 10/12/2020 3:08 am
genepine
(@genepine)
Eminent Member
Topic starter
 

@ryo

object-position: top; で画像上部ドン突き にできました。
object-position: 50% 20%; で上部少々さげでした。

画像編集にあまり手をかけず、という怠けでした。

ありがとうございます。

 
投稿済 : 10/12/2020 8:26 am
共有: