Instagram APIから画像を抜き出しています。
html
とcss
は以下の通り全て共通なのですが、取り出してくる写真によって画像部分の縦の長さが一定になりません。(全体の縦横の長さは一定になっています。)
解決方法わからず、誤りご指摘頂けますと幸甚です。
html
1*全て同じコードですので、1枚分のみ記載します。 2<div class = "row"> 3 <div class="col-md-3 col-sm-4 col-xs-6"> 4 <div class= 'card' %> 5 <a href="https://www.instagram.com/p/BNUGq0yDKVa/"> 6 <div class= 'wwrapper' > 7 <img class="instagram_img" alt="Instagram Image" src="https://scontent.cdninstagram.com/t51.2885-15/s320x320/e35/15251611_228681690895009_1291086732753633280_n.jpg?ig_cache_key=MTM5Mjc2NzUxNTkzNTY3OTgzNA%3D%3D.2" /> 8 <div class="card-img-overlay productimg"> 9 <p class="card-title productbrand"> 10 10hours ago</br> 11 @ 12:47, Nov 27</br> 12 </p> 13 </div> 14 </div> 15</a> <div class="card-block"> 16 毎日の気分によって 17香りのおしゃれを❗❤ 香りって癒し効果があるので 18気分も好きな香りで 19一変... 20 </div><!--card-block--> 21 </div><!--card--> 22 </div><!--col--> 23<div><!--row-->
css
1.card { 2 max-width: 15rem; 3 height: 28rem; 4 } 5.instagram_img{ 6 width: 100%; 7 height: auto; 8} 9.instagram_logo{ 10 width: 2rem; 11 height: auto; 12} 13.wwrapper{ 14 position: relative; 15} 16 17.card-img-overlay.productimg{ 18 padding: 0rem; 19} 20.card-title.productbrand{ 21 background-color:rgba(0, 0, 0, 0.5); 22 bottom: 0rem; 23 color: $white; 24 position: absolute; 25 width: 100%; 26 margin-bottom: 0rem; 27} 28.instagram_date{ 29 background-color: #ffdbb7; 30 padding: 0.2rem 0.2rem; 31 border-radius: 1rem; 32} 33.instagram_card{ 34 width: 17rem; 35} 36
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/11/28 03:27
2016/11/28 03:49
2016/11/28 14:43