###前提・実現したいこと
instagram画像を正方形表示させ、レスポンシブ対応させたい。
画像の取得、表示はできておりますが、画像を正方形の状態でレスポンシブができません。
###発生している問題・エラーメッセージ
Instagramへの投稿画像が縦横サイズがバラバラなため、
正方形の状態でレスポンシブできない。
###該当のソースコード
・javascriptコード
$(function(){ var $container = $(".instagram"); var html = ""; $.ajax({ url: "function.php",//PHPファイルのURL type:"POST", dataType: "json" }).done(function(data){ //通信成功時の処理 $.each(data.data,function(i,item){ var imgurl = item.images.low_resolution.url; //低解像度の画像のURLを取得 var link = item.link; //リンクを取得 html += "<li><a href='" + link + "' target='_blank'><img src='" + imgurl + "' width='195' height='195'></a></li>"; }); }).fail(function(){ //通信失敗時の処理 html = "<li>画像を取得できません。</li>"; }).always(function(){ //通信完了時の処理 $container.html(html); }); });
・phpコード
<?php //POSTリクエストの場合のみ受付 if($_SERVER['REQUEST_METHOD'] == 'POST'){ //アクセストークン $access_token = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; //JSONデータを取得して出力 echo @file_get_contents("https://api.instagram.com/v1/users/self/media/recent/?access_token={$access_token}"); //終了 exit; } ?>
・htmlコード
<ul class="instagram"></ul>
・cssコード
#ig ul.instagram img { object-fit: cover; width: 100%; height: auto; } #ig ul.instagram { width: 1000px; } #ig ul.instagram li { float: left; overflow: hidden; width: 20%; height: 195px; }
###試したこと
object-fit:cover;を使用して、正方形にトリミングをしてみましたが、
object-fitはpxでの指定しかできない?ようで、レスポンシブになりませんでした。
・正方形の画像取得ができるようなのですが、以下のコードを組み込むと画像取得すらできませんでした。
<?php define('INSTAGRAM_ACCESS_TOKEN', 'XXXXXXXXX.XXXXXXX.XXXXXXXXXXXXXXXXXXXXXXXXXXX'); // アクセストークン $user_id = 'XXXXXXXXX'; // ID(アクセストークンの先頭10桁の数字) $photos = array()y(); $photos_api_url = 'https://api.instagram.com/v1/users/'.$user_id.'/media/recent?access_token=' . INSTAGRAM_ACCESS_TOKEN . '&count=10'; // &count=表示個数 $photos_data = json_decode(@file_get_contents($photos_api_url)); // 正方形の画像 foreach ($photos_data->data as $photo) { echo '<a href="' . $photo->link . '" target="_blank"><img src="' . $photo->images->standard_resolution->url . '"></a>' . "\n"; } ?>
###補足情報(言語/FW/ツール等のバージョンなど)
回答1件
あなたの回答
tips
プレビュー