スポンサーリストを追加#26
Conversation
✅ Deploy Preview for unrivaled-empanada-4b1c20 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
ダミー画像でも例を出してくれるとスタイルのレビューなどもできるのですがいかがでしょうか。 |
|
@mochi-yu まだ実装途中なので、レビュー投げるときはダミーデータ入れた状態にしますね〜 |
|
@masakurapa i18n 対応をスポンサー一覧ページにも取り込んでいます、そちらの都合の良いタイミングで #36 マージしてください 🙇🏻 |
|
@mochi-yu ありがとうございます、取り込みました〜!! |
mochi-yu
left a comment
mochi-yu
left a comment
There was a problem hiding this comment.
レスポンシブ対応が不十分そうなところがあり、言葉で全て伝えるのも難しそうでしたので b76e0a15c4dfc0f6f2e4101f92d22fd88c6dfeeb で例として変更しています。
上のコミットではコメントで指摘している各所についても修正されているかと思います。
主な変更内容としては以下のとおりです。
- コンテナの
width: fit-content;を使わない- 中の要素の大きさに応じて、画面幅を超えてしまう可能性がある。
- 画像サイズを固定で指定しない。
- 画面サイズを変更した時に画面幅を超えてしまうため。
- かわりに、
aspect-ratioは固定して、 width は 100% としています。
| img { | ||
| object-fit: contain; | ||
| border-radius: 50%; | ||
| display: block; | ||
| margin: 0 auto; | ||
| } |
There was a problem hiding this comment.
| img { | |
| object-fit: contain; | |
| border-radius: 50%; | |
| display: block; | |
| margin: 0 auto; | |
| } | |
| img { | |
| object-fit: cover; | |
| border-radius: 50%; | |
| display: block; | |
| margin: 0 auto; | |
| } |
正方形ではない画像の時に見切れそうです。
There was a problem hiding this comment.
coverにすると逆に画像がほとんど見えないケースもありそうなんですよねー
ここは実際のデータ入ってきてから再調整でもいいですかね？
There was a problem hiding this comment.
coverにすると逆に画像がほとんど見えないケースもありそうなんですよねー
これってどういうものですかね…？極端に縦長・横長の画像をもらうとかでしょうか？
そういった画像が来る方が珍しい気がして、ベース cover の方がスタイルとしては統一感あるのかな、と思ってしまいますね 🤔
There was a problem hiding this comment.
そうですねー、去年の見ていただくと分かるかもしれないです（こちらについてはある程度サイズ定義出来ないか確認してみましょうかね）
| <Image | ||
| src={sponsor.imageSrc} | ||
| alt={sponsor.name} | ||
| title={sponsor.name} | ||
| width={width} | ||
| height={height} | ||
| loading="lazy" | ||
| priority | ||
| style={sponsor.dialog ? "cursor:pointer" : null} | ||
| onclick={ | ||
| sponsor.dialog | ||
| ? `document.getElementById('${sponsor.dialog.openId}')?.showModal()` | ||
| : null | ||
| } | ||
| /> |
There was a problem hiding this comment.
| <Image | ||
| src={sponsor.imageSrc} | ||
| alt={sponsor.name} | ||
| title={sponsor.name} | ||
| width={width} | ||
| height={height} | ||
| loading="lazy" | ||
| priority | ||
| style={sponsor.dialog ? "cursor:pointer" : null} | ||
| onclick={ | ||
| sponsor.dialog | ||
| ? `document.getElementById('${sponsor.dialog.openId}')?.showModal()` | ||
| : null | ||
| } | ||
| /> |
There was a problem hiding this comment.
画像を変形してしまうと会社によってはロゴの改変にあたって怒られそうなので、 object-fit: contain; で良いのかなと思います。
|
@mochi-yu |
|
@masakurapa プッシュしそびれていました、こちらです： b76e0a1 |
2 participants
概要
変更理由
変更内容
レビュワーへの共有事項など