以下の内容はhttps://tech.motoki-watanabe.net/entry/2019/04/23/153048より取得しました。


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でいいそうです。




以上の内容はhttps://tech.motoki-watanabe.net/entry/2019/04/23/153048より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14