Q&A
object-fit をIE11で対応させたいです。
以下の記事を読んで、対応させようとしましたが、なぜだかできません。
私が愛してやまない待望の外接リサイズobject-fitを使うのにIEのせいであと1年半も待ってらんないっ！！
記事に書いてある通りなのですが、コードに加えた内容は以下3点です。
・JSの「object-fit-images」をCDNで読み込む
<!--object-sit（IE対策）--> <script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.3/ofi.js"></script>
・JSファイルに追記
javascript
1//object-fit（IE対策） 2objectFitImages();
・CSS追記
.store-image img{ object-fit: cover; font-family: 'object-fit: cover;'; /*IE対策*/ }
html
1不要そうなところは省略してあります。 2<!DOCTYPE html> 3<html lang="ja"> 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 9 crossorigin="anonymous"> 10 <link rel="stylesheet" href="{% static 'myapp/css/main.css' %}"> 11 <!-- Global site tag (gtag.js) - Google Analytics --> 12 <script async src="https://www.googletagmanager.com/gtag/js?id=aaaa"></script> 13 <script> 14 window.dataLayer = window.dataLayer || []; 15 function gtag(){dataLayer.push(arguments);} 16 gtag('js', new Date()); 17 gtag('config', 'aaaaaa'); 18 </script> 19</head> 20<body> 21 <div class="store-image"> 22 <img src="{{ store.image_1.url }}" alt="写真"> 23 </div> 24 25 <script defer src="https://use.fontawesome.com/releases/v5.4.1/js/all.js" integrity="sha384-L469/ELG4Bg9sDQbl0hvjMq8pOcqFgkSpwhwnslzvVVGpDjYJ6wJJyYjvG3u8XW7" 26 crossorigin="anonymous"></script> 27 <!-- jQuery --> 28 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 29 <!-- jQuery UI --> 30 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 31 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 32 <script src="{% static 'myapp/js/main.js' %}"></script> 33 <!--object-fit（IE対策）--> 34 <script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.3/ofi.min.js"></script> 35</body> 36</html>
css
1.store-image img{ 2 height: 150px; 3 width: 215px; 4 object-fit: cover; 5 font-family: 'object-fit: cover;'; /*IE対策*/ 6}
javascript
1//object-fit（IE対策） 2objectFitImages();
以下のエラーが出ていました。
Uncaught ReferenceError: objectFitImages is not defined
CDNでは、読み込めないのでしょうか？
書いている位置が悪いのでしょうか？
何かお分かりになる方、アドバイスいただけますと幸いです。
宜しくお願い致します。
自己解決
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。