質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

2525閲覧

同じコードを記載しても画像サイズが一定にならない

innjera

総合スコア132

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2016/11/27 23:16

Instagram APIから画像を抜き出しています。
htmlcssは以下の通り全て共通なのですが、取り出してくる写真によって画像部分の縦の長さが一定になりません。(全体の縦横の長さは一定になっています。)

解決方法わからず、誤りご指摘頂けますと幸甚です。

イメージ説明

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

css

1.instagram_img{ 2 width: 100%; 3 height: auto; 4}

こうなってますし、画像の比率が違うからではないですか?
###追記

css

1.card-instagram_img-wrap { 2 position: relative; 3 overflow: hidden; 4 height: 15rem; 5} 6.instagram_img { 7 position: absolute; 8 top: 50%; 9 left: 50%; 10 transform: translate(-50%, -50%); 11}

html

1<div class="card-instagram_img-wrap"> 2 <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" /> 3</div>

投稿2016/11/28 01:26

編集2016/11/28 03:46
gin

総合スコア2722

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

innjera

2016/11/28 03:27

いつも有難う御座います。 width: 100%; height: 15rem; 等で指定すると、当然ですが、写真が歪みます。。 写真は全て表示されず切り取られても問題無いので、歪ませずに表示したいのですが、どう書いててもうまくいかず。。。 画像関連のCSSでは、いつもつまずいてしまいます・・
gin

2016/11/28 03:49

なんか最近teratail重いですな…追記に10分くらいかかった… さて追記しておきました。 imgをdivで囲んではみ出た部分を消すやつです。
innjera

2016/11/28 14:43

ginさん、いつも有難う御座います! 完璧に修正できました! 同じ質問を何度もしてますので、教えて頂いたコード、しっかりレビューして、cssのレベルアップします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問