【まとめ】
・windows7のサポート対応が2020年1月までなので、それまでの辛抱
・それまでは、これでしのぐ
＋
cssへの記述
/*外接リサイズ*/
.of img {
width: 100px;
height: 100px;
object-fit: cover;
font-family: ‘object-fit: cover;’; /*IE対策*/
}
css3
【Jquery】jQuery＆CSS3で超簡単！スクロールするとかっこ良く要素を表示する方法7つ
【まとめ】
・要素が表示されるエリアまでスクロールしたら、移動＋フェードイン表示しながら要素を表示します。
【CSS】img画像の縦横比を保ったままボックス内に収める方法
img画像の縦横比を保ったままボックス内に収める方法
【参考】
https://1design.jp/web-development/css/1844
まとめ
・基本は下記のソース
img {
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
・今回自分が使用したのは
object-fit:scale-down
モダンブラウザならこれ付けただけでOKでした
【css】CSS3でアニメーションをつけるジェネレーターまとめ
CSS3アニメーションのサンプルまとめ
http://rakuten-tips.com/htmlcss/generator/
使いやすいの
ぐりぐりドラッグでテストしながらアニメーションを作成できる
http://jeremyckahn.github.io/stylie/
動作デモを確認しながらお気に入りの動きを見つけることができます。色々と試してみてください。
jQueryでanimationを制御
12