画像のアスペクト比を4:3に指定してCSSで内接リサイズしました
内接リサイズと外接リサイズが逆に伝えられてきました
画像を内接リサイズするという話があって,
それには賛成したんですけど.
実際コードを見てみるとobject-fit: cover;していたので外接リサイズにしているように見える問題がありました.
余白を無くしたいという話だったので外接リサイズしたいのかもしれませんが, 外接リサイズには反対です. Twitterの投稿画像のサムネイルなどは外接リサイズされていますが(公式アプリの場合), ああいうのはクリックしてすぐにポップアップで本物のフルサイズの画像が出るから切り取られても許されるのです. 今回のような画像がポップアップしてくるわけでもないケースで外接リサイズするのはよろしくないという話をしました.
実際やりたかったことは外接リサイズのようでした. 説得に成功して内接リサイズすることにしました.
内接リサイズと外接リサイズ, ややこしいですよね. 内積と外積ぐらいややこしい.(どちらも忘れたけど)
見栄えは大切ですが, 画像がサイトの事情で途中で切れてしまうというのは大変見栄えが悪いです. それならば, 内接リサイズで余白を足してしまったほうがマシですよね.
内接リサイズされて, 余白が追加されているのは画像が少し小さいぐらいでたいした害はありませんが, 外接リサイズされて, 画像が途中で切れてしまうのは深刻に見栄えが悪いと思います.
少し外れますが, 私はアスペクト比16:9が主流になっている世の中なのでこちらの方が良いと思ったんですが, なんで4:3に決まったのかは忘れました.
CSSがよくわからなくなってきました
なんかCSSの魔界にハマってよくわからないことになっています.
既存のCSSが増え過ぎて何が原因で何が起きているのか全くわからなくなってきました.
Shadow DOM助けて… と思いましたけど, そもそもCSSをグローバルに適用したがる人間のサガが原因でこうなってるので, Shadow DOMを導入するのはそれはそれで面倒くさそうですね. CSSがグローバルに適用されないので.
パティングを増やすとカオスになるという予想が当たってきてしまってとてもつらい. せめてmarginにしてもらうべきでした…
私はただ画像を4:3にして内接リサイズしたいだけなんですが,
現状はCSSだけでアスペクト比を固定するテク - Qiitaを参考にしたようで,
要素をリサイズする手法が使われています.
object-fit: containがあるからもうちょっと楽な方法が使えるはずなんですが…
なんか大変混乱してたけど普通に
img {
object-fit: contain;
}
を指定すれば内接リサイズされました.
配置を周りに表示して画像を中央に配置する方法
内接リサイズされた画像がの余白以下のようになって気持ち悪い.
ピンクが画像本体で, 茶色が余白です.
私はこの余白部分を下だけではなく, 上下に配置したいです.
画像を中央に表示する方法がきっとあるはずだと思いました.
object-fitで配置したのでその関連を調べてみたらobject-positionが出てきました.
しかし,
これでcenterを指定しても,
パーセンテージ値を指定しても全く動作がしない.
ピクセルを指定したら動きはするんですが…
実際MDNにもピクセルの例しか載っていませんね.
positionを見るとcenterを受け付けるように思えますし,
実際Firefoxのdeveloper toolはcenterを補完します.
何か重大な勘違いをしているのでしょうか…
勘違いをしていたようです.
私はimgの上位にdivを置いて,
そのdiv要素にbackground-colorを指定していて,
その子要素のimgにobject-fit: contain;を設定していましたが.
background-imageもwidthもheightもimg自身に指定する必要があったようですね.
つまり下のようにすればOK.
.thumbnail {
background-color: $brown;
width: 100%;
height: 100%;
object-fit: contain;
}
hatena-bookmark