- このトピックには5件の返信、2人の参加者があり、最後に
により11年前に更新されました。
-
投稿
-
-
わいひら様
いつもお世話になっています。
カテゴリ別人気エントリーを大きなサムネイルで表示させると、アイキャッチ画像の有無によって表示されるサムネイルのサイズが異なります。
サイズをすべて統一させるのはどのようにすればよいでしょうか？
-
すみません、キャプチャを再送します。
-
これ以前にも違うトピックで答えましたけれども、「俺ならこうするシリーズ」と言うことで、codepenに公開してあります。
参考: 人気の記事やらの画像を任意のサイズに変更する | codepen
元々はウチのサイトで書いたjQuery: Youtubeの動画アドレスを書くだけでPlayerを埋め込んでみる って内容の応用です。
jQueryを使って、imgで読み込んでいるものをbackground-imageで読み直し、heightを0にした要素にpadding: 0 0 56.25%(16:9)で高さを確保し、画像をbackbround-positionで中央に配置することで、4:3の画像であっても、またその他のアスペクト比の画像であっても16:9あるいは任意のアスペクト比で表示することができると言う内容になります。
codepenは、その時のトピックでどうもうまく行かないと言われていたので、僕がその方向けにいやイケますよ(あるいはこういう感じを考えておられたのではなかろうかというのを加味して)と作ったものですので、若干変更されている部分もありますが、考え方は同じです。
jQueryの部分は、imgをbackgroundに変更しているだけで、そのほとんどはcssでスタイルします。
また同じ方法でリストのサムネイルの変更も例があるので比較してみて下さい。 -
☓ backbround-position
◯ background-position -
-
hidekichi様、わいひら様
ご返信ありがとうございます。
自分には少し難しそうなので、わいひらさんの方法でやってみようと思います。
-
- このトピックに返信するにはログインが必要です。