青いやつの進捗日記。

べんきょうのしんちょくをかいていきます。

HTMLCSSで画像のトリミング、最適解はHTMLのタグにstyle属性でbackground-image。

tech.motoki-watanabe.net

tech.motoki-watanabe.net

とか色々やりました。HTML側で画像を指定したほうがいいと。

しかしtransition効かせたいとかの場合、imgタグで書いてると出来ない。

結局は最適解はHTMLのタグにstyle属性でbackground-imageですね。

<div style="background-image: url('./img/img1.jpg')"

これならtransitionとかも効かせられるし、トリミングもサイズ決めてcoverするだけでけっこう楽です。(下記参照)

style01.net

で、気をつけるべきは

cafe-system.com

これの通りですが、

<div style="background-image: url("./img/img1.jpg")"

としないこと。background-imageのURLはシングルクォーテーションで囲いましょう。じゃないとこのように認識してしまいます。


【追記】

とはいえタグの意味は文書の構造によるので、写真としてメインのコンテンツであればdivにstyleでbackground-imageよりimgタグ使うべき、だそうです。 サムネイルとか、画像が装飾であればbackground-imageでいいそうです。