【こうすればよかった】続・ブログやギャラリーでサイズの異なる画像を制御する方法
以前jqueryつかって画像サイズをいい感じに制御する方法を書いたのですが、いろんなとこからヒントを得てjqueryなしのcssのみで対応する方法を思いついたのでそれについて書いていこうと思います。
前回までは！
div.thumbnail > a > img
という構造で、aタグの大きさをdiv.thumbnailと同じ大きさにしてその中にimgをaタグと同じサイズにしていました。
前の記事のスクリプトをそのまま持ってくるとこんな感じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<article> <div class="silver"> <a href="記事のURL"> <img src="画像のパス"> </a> </div> </article> article { width: 33.3%; } .silver { width: 100%; } .silver:before { content: ""; display: block; padding-top: 70.71%; //比率に応じて変更 } a { position: absolute; top: 0; } img{ width: auto; } $(document).ready(function () { var w = $('.silver').width(); var h = $('.silver').height(); $('.silver a').css({'width': w +'px','height': h +'px'}); $('.silver img').css({'max-height': h +'px'}); }); $(window).resize(function () { var w = $('.silver').width(); var h = $('.silver').height(); $('.silver a').css({'width': w +'px','height': h +'px'}); $('.silver img').css({'max-height': h +'px'}); }); |
注目するとこはimgのサイズを変えていたという点です。
では今回はどうするのかというと、
background-sizeを使います。
aタグにbackgroundで画像を入れるのもアリなのかもしれませんが、そうした場合気になる点があるためそうはしてません。
その気になる点というのは・・・・
aタグの中身が空っぽになる
ただそれだけです。テキストをindentで飛ばしてしまえばいいのかと思ったのですが個人的にこの細工はhtmlが汚く見えてあまり好きではないので・・・
ということでimgにbackground-sizeを適用していこうと思います。
htmlの構造は前回と変わらず
div.thumbnail > a > img
です。
いきなり結果からいきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<article> <div class="thumbnail"> <a href="記事のURL"> <img src="画像のパス" style="background-image:url(画像のパス)"> </a> </div> </article> .thumbnail{ position: relative; width: 100%; } .thumbnail:before { content: ""; display: block; padding-top: 70.71%; //比率に応じて変更 } .thumbnail a { position: absolute; top: 0; height: 100%; width: 100%; } .thumbnail a img { height: 100%; padding-left: 100%; background-size: cover; background-position: center center; } |
こうすることでどんなサイズの画像でも全て同じサイズになります。
imgのcss見たらわかるんですがテキストをindentで飛ばすのは嫌だとか言ってるのにpaddingで同じようなことやってます。でもこれはいいと思うんです。なぜならimgならalt属性つかって画像のタイトルいれればいいし、html上とブラウザ上で見たときの差が少ないから。何言ってんの？って感じですけど、仮にaタグにテキスト書いてindentで飛ばした場合、もちろんブラウザ上にその文字はありません。でもソースみればhtml上に飛ばしたてテキストがあります。
しかしこのimgをpaddingで飛ばして同じ画像をbackgroundで表示すれば、ブラウザ上に画像もあるしhtml上に画像もあるので、差がない（少ない）のです。
あと前回も今回もそうですが、:beforeのpaddingをメディアクエリーで変えれば、pcでは3:4だけどスマホでは1:5とかにできます。画面の小さいデバイスでは比率変えたいですもんね。