{"id":5807,"date":"2020-04-20T09:00:15","date_gmt":"2020-04-20T00:00:15","guid":{"rendered":"http:\/\/test.bscre8.com\/bslife\/?p=5807"},"modified":"2025-04-02T12:48:54","modified_gmt":"2025-04-02T03:48:54","slug":"hm20200420","status":"publish","type":"post","link":"https:\/\/www.bscre8.com\/journal\/2020\/04\/20\/hm20200420\/","title":{"rendered":"\u3010\u89e3\u6c7a\u3011object-fit\u3092IE\u5bfe\u5fdc\u3055\u305b\u3088\u3046\u3068\u3057\u305f\u3089\u52d5\u753b\u304c\u52d5\u304b\u306a\u304f\u306a\u3063\u305f"},"content":{"rendered":"

\u3053\u3093\u306b\u3061\u306f\uff01\u7267\u91ce\u3067\u3059\u3002<\/p>\n

\u5148\u65e5\u3068\u3042\u308b\u7d0d\u54c1\u524d\u306e\u30b5\u30a4\u30c8\u3092IE\u3067\u52d5\u4f5c\u78ba\u8a8d\u3057\u3066\u3044\u305f\u3068\u3053\u308d\u3001\u82e5\u5e72\u306e\u8868\u793a\u5d29\u308c\u304c\u2026\u3002
\n\u76ee\u7acb\u3063\u305f\u306e\u304c\u300eobject-fit\u300f\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u3063\u3066\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0\u3057\u305f\u7b87\u6240\u3067\u3057\u305f\u3002
\n\u4f7f\u3044\u65b9\u306b\u3064\u3044\u3066\u306f\u5e2b\u5320\u306e\u8a18\u4e8b\u3067\u8a73\u3057\u304f\u3054\u7d39\u4ecb\u3057\u3066\u3044\u307e\u3059\u3002
\n\u3010\u4fbf\u5229CSS\u30d7\u30ed\u30d1\u30c6\u30a3\uff5cobject-fit\u3011background-size\u3068\u540c\u3058\u6319\u52d5\u3092img\u30bf\u30b0\u306b\u9069\u7528\u3067\u304d\u308b\u300cobject-fit\u300d<\/a><\/p>\n

\u753b\u50cf\u304c\u7e26\u3084\u6a2a\u306b\u4f38\u3073\u3001\u300c\u306f\u3044\u306f\u3044 object-fit \u301c\u3001\u3042\u306a\u305f\u304c\u60aa\u3044\u3093\u3058\u3083\u306a\u304f\u3066 IE \u304c\u60aa\u3044\u306e\u3088\u301c\u3001\u3054\u3081\u3093\u306d\u301c\u300d\u3068\u3001object-fit \u3092 IE \u306b\u5bfe\u5fdc\u3055\u305b\u308b\u30b9\u30af\u30ea\u30d7\u30c8\u300efitie.js\u300f\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3002
\n\u8a73\u3057\u304f\u306f\u3053\u3061\u3089\u3002
\nIE\u3067\u3082object-fit\u3092\u4f7f\u3048\u308b\u3088\u3046\u306b\u3059\u308b\u30b9\u30af\u30ea\u30d7\u30c8\u300cfitie\u300d | TechMemo<\/a><\/p>\n

object-fit \u3055\u3093\u305f\u3061\u306f\u3059\u3054\u304f\u7d20\u76f4\u3067\u5049\u3044\u306e\u3067\u3001\u753b\u50cf\u305f\u3061\u306f\u5373\u5ea7\u306b\u5143\u306e\u7e26\u6a2a\u6bd4\u306b\u623b\u3063\u3066\u304f\u308c\u3066\u3001\u4e00\u4ef6\u843d\u7740\u3002
\n\u3082\u3046\u4e00\u5ea6\u3001\u4e00\u901a\u308a\u898b\u3066\u304a\u3053\u3046\u3001\u3068\u30b5\u30a4\u30c8\u306b\u30a2\u30af\u30bb\u30b9\u3057\u305f\u3068\u3053\u308d\u2026\u3002<\/p>\n

\u52d5\u753b\u304c\u518d\u751f\u3055\u308c\u306a\u3044\uff01\uff1f
\n\u3042\u308c\u2026\uff1f\u3055\u3063\u304d\u307e\u3067\u3061\u3083\u301c\u3093\u3068\u52d5\u3044\u3066\u307e\u3057\u305f\u3088\u306d\u2026\uff1f<\/p>\n

Chrome \u306f\u901a\u5e38\u901a\u308a\u518d\u751f\u53ef\u80fd\u3002
\n\u3084\u3063\u3071IE\u7121\u7406\uff01\uff01\u3068\u534a\u72c2\u4e71\u6c17\u5473\u306b\u306a\u308a\u306a\u304c\u3089\u3001\u3044\u308d\u3093\u306a\u30b5\u30a4\u30c8\u3092\u898b\u3066\u3044\u308d\u3093\u306a\u52d5\u753b\u5f62\u5f0f\u3067\u4fdd\u5b58\u3057\u3066\u8868\u793a\u3055\u305b\u305f\u308a\u3001\u30b5\u30a4\u30ba\u30c0\u30a6\u30f3\u3092\u7e70\u308a\u8fd4\u3057\u305f\u308a\u2026\u3002
\n\u304b\u306a\u308a\u306e\u6642\u9593\u3092\u8981\u3057\u3001\u3084\u3063\u3068\u89e3\u6c7a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3057\u305f\uff01<\/p>\n

object-fit\u3092IE\u5bfe\u5fdc\u3055\u305b\u3088\u3046\u3068\u3057\u305f\u3089\u52d5\u753b\u304c\u52d5\u304b\u306a\u304f\u306a\u3063\u305f<\/h2>\n

\u4eca\u56de\u306e\u4e8b\u8c61\u306e\u539f\u56e0\u306f\u30bf\u30a4\u30c8\u30eb\u306e\u901a\u308a\u3002
\nobject-fit\u3092IE\u5bfe\u5fdc\u3055\u305b\u3088\u3046\u3068\u3057\u3066 fitie.js \u3092\u4f7f\u3063\u305f\u3089\u3001\u52d5\u753b\u306e\u81ea\u52d5\u518d\u751f\u304c\u52b9\u304b\u306a\u304f\u306a\u3063\u3066\u3057\u307e\u3063\u305f\u306e\u3067\u3059\u3002<\/p>\n

\u4f8b\u3048\u3070\u3001object-fit \u3092\u4f7f\u3063\u3066\u52d5\u753b\u3092\u89aa\u8981\u7d20\u3067\u30de\u30b9\u30af\u3057\u305f\u3044\u3001\u3068\u601d\u3063\u305f\u6642\u306b\u3001\u3053\u3093\u306a\u98a8\u306b\u8a18\u8ff0\u3059\u308b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n

HTML<\/strong><\/p>\n

<div class=\"object-fit\">\r\n\t<video src=\"example.mp4\" muted autoplay loop><\/video>\r\n<\/div><\/code><\/pre>\n
CSS<\/strong><\/p>\n
div.object-fit {\r\n\twidth: 800px;\r\n\theight: 480px;\r\n\toverflow: hidden;\r\n}\r\ndiv.object-fit video {\r\n\tobject-fit: cover;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n}<\/code><\/pre>\n
\u3053\u306e\u3088\u3046\u306b\u8a18\u8ff0\u3057\u305f\u3082\u306e\u304c\u3001fitie.js \u3092\u4f7f\u3046\u3068\u3001IE \u3067\u8868\u793a\u3055\u308c\u305f\u3068\u304d\u3060\u3051\u3053\u3093\u306a\u98a8\u306b\u5909\u308f\u308a\u307e\u3059\u3002<\/p>\n
HTML<\/strong><\/p>\n
<div class=\"object-fit\">\r\n\t<object>\r\n\t\t<video src=\"example.mp4\" muted autoplay loop><\/video>\r\n\t<\/object>\r\n<\/div><\/code><\/pre>\n
<object><\/object> \u3068\u3044\u3046\u8981\u7d20\u304c\u3001\u52d5\u753b\u3092\u56f2\u3080\u3088\u3046\u306a\u5f62\u306b\u306a\u308a\u3001\u30bd\u30fc\u30b9\u304c\u5909\u308f\u3063\u3066\u3057\u307e\u3044\u307e\u3059\u3002
\n\u3069\u3046\u3084\u3089\u3053\u308c\u304c\u826f\u304f\u306a\u3044\u307f\u305f\u3044\u306a\u3093\u3067\u3059\u3088\u306d\u2026\u3002<\/p>\n
\u554f\u984c\u306e\u7b87\u6240\u304b\u3089 object-fit \u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u524a\u9664\u3057\u3066\u307f\u305f\u3068\u3053\u308d\u3001\u6b63\u5e38\u306b\u81ea\u52d5\u518d\u751f\u3055\u308c\u307e\u3057\u305f\u3002
\n\u305d\u306e\u3042\u3068 IE \u306e\u307f\u8a72\u5f53\u7b87\u6240\u306e object-fit \u3092\u524a\u9664\u3057\u3001\u8ffd\u52a0\u306e CSS \u3092\u66f8\u3044\u3066\u5b8c\u4e86\u3002
\n\u305d\u306e Tips \u304c\u3053\u3061\u3089\u3002
\nobject-fit\u3092CSS\u306e\u307f\u3067IE\u306b\u3082\u5bfe\u5fdc\u3057\u3066\u307f\u308b<\/a><\/p>\n
fitie.js \u3092\u7d39\u4ecb\u3059\u308b\u30b5\u30a4\u30c8\u3082\u69d8\u3005\u3042\u308a\u3001\u52d5\u753b\u306e\u30c8\u30ea\u30df\u30f3\u30b0\u3082\u554f\u984c\u306a\u3055\u305d\u3046\u3060\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u3069\u3046\u3044\u3046\u8a33\u304b\u79c1\u304c\u5bfe\u5fdc\u3057\u305f\u6642\u306f\u4e0d\u5177\u5408\u304c\u8d77\u304d\u3066\u3057\u307e\u3044\u307e\u3057\u305f\u2026\u3002
\n\u3082\u3057\u3001object-fit \u3067\u30c8\u30ea\u30df\u30f3\u30b0\u3057\u305f\u52d5\u753b\u304c IE \u3067\u518d\u751f\u3055\u308c\u306a\u3044\u3001\u3068\u3044\u3046\u4e8b\u8c61\u304c\u8d77\u3053\u3063\u305f\u3089\u3001object-fit \u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u524a\u9664\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\uff01<\/p>\n
\u30a4\u30ec\u30ae\u30e5\u30e9\u30fc\u306a\u4e8b\u8c61\u3060\u3063\u305f\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u304c\u3001\u8ab0\u304b\u306e\u304a\u5f79\u306b\u7acb\u3066\u308c\u3070\u5e78\u3044\u3067\u3059\u3002<\/p>\n
\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u306e\u6319\u52d5\u304c\u304a\u304b\u3057\u3044\uff01\u307e\u305f\u3001\u601d\u3044\u901a\u308a\u306b\u3044\u304b\u306a\u3044\uff01\u3068\u3044\u3063\u305f\u304a\u60a9\u307f\u3082\u3001\u304a\u554f\u3044\u5408\u308f\u305b\u304f\u3060\u3055\u3044\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u3053\u3093\u306b\u3061\u306f\uff01\u7267\u91ce\u3067\u3059\u3002 \u5148\u65e5\u3068\u3042\u308b\u7d0d\u54c1\u524d\u306e\u30b5\u30a4\u30c8\u3092IE\u3067\u52d5\u4f5c\u78ba\u8a8d\u3057\u3066\u3044\u305f\u3068\u3053\u308d\u3001\u82e5\u5e72\u306e\u8868\u793a\u5d29\u308c\u304c\u2026\u3002 \u76ee\u7acb\u3063\u305f\u306e\u304c\u300eobject-fit\u300f\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u3063\u3066\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0\u3057\u305f\u7b87\u6240\u3067\u3057\u305f\u3002 \u4f7f\u3044\u65b9\u306b\u3064\u3044\u3066\u306f\u5e2b\u5320…<\/p>\n","protected":false},"author":1,"featured_media":5816,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[114],"tags":[],"class_list":["post-5807","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-insight"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bscre8.com\/journal\/wp-json\/wp\/v2\/posts\/5807","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bscre8.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bscre8.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bscre8.com\/journal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bscre8.com\/journal\/wp-json\/wp\/v2\/comments?post=5807"}],"version-history":[{"count":1,"href":"https:\/\/www.bscre8.com\/journal\/wp-json\/wp\/v2\/posts\/5807\/revisions"}],"predecessor-version":[{"id":15115,"href":"https:\/\/www.bscre8.com\/journal\/wp-json\/wp\/v2\/posts\/5807\/revisions\/15115"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bscre8.com\/journal\/wp-json\/wp\/v2\/media\/5816"}],"wp:attachment":[{"href":"https:\/\/www.bscre8.com\/journal\/wp-json\/wp\/v2\/media?parent=5807"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bscre8.com\/journal\/wp-json\/wp\/v2\/categories?post=5807"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bscre8.com\/journal\/wp-json\/wp\/v2\/tags?post=5807"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}