画像に指定したCSSが適用されたり、されなかったりする

タイトル通り画像に指定したCSSが開く度に適用されたりされなかったりで、レイアウトが安定せずに困っています。
具体的には、画像に指定しているheightが何故か8つある内の最後の2つにだけ適用されない、という事が多々あるといった感じです。

以下のGIFをご覧になっていただくとより分かりやすいかと思います。
→imgurに飛びます。

ご覧の通り、「Git・Github」と「webpack」の画像の部分が時々潰れて表示されてしまいます。
潰れている時は縦の長さが113pxになっているのですが、そもそもCSSのどこにも113pxという数字は指定していません。
デベロッパーツールで確認してもどこかの記述との衝突ではないようです。
試しにHTML側のタグに直接、width="150" height="150"・style="width:150px;height:150px"を記述してみても変わりませんでした。

それと私はChromeを使っているのですが、edgeとfirefoxで閲覧した場合にはこの問題は確認できませんでした。

自分で調べたりもしたのですが、同じような事例がヒットせず、今回質問させていただきました。
皆様、どうかお力添えをよろしくお願いいたします。

それと直接原因と関係があるか分からないのですが、HTML内の<div class="skills">は、以下のコードでv-forを使ってレンダリングしたため、一応「Vue.js」と「JavaScript」のタグを入れさせていただきました。

<div class="skills" v-for="skill in skills">
　　<img v-bind:src=`img/${skill.name}.png` v-bind:alt=`${skill.name}&rsquo;s-logo`>
　　<h2>{{ skill.name }}</h2>
　　<a v-on:click="" class="open-details">Details <i class="fas fa-angle-right"></i></a>
</div>

以下が該当部分のコードになります。

HTML
1<div class="skills">
2  <img src="img/Git・Github.png"　alt="Git・Github&rsquo;s-logo">
3  <h2>Git・Github</h2>
4  <a v-on:click="" class="open-details">Details <i class="fas fa-angle-right"></i></a>
5</div>
6
7<div class="skills">
8  <img src="img/webpack.png"　alt="webpack&rsquo;s-logo">
9  <h2>webpack</h2>
10  <a v-on:click="" class="open-details">Details <i class="fas fa-angle-right"></i></a>
11</div>

SCSS
1.skills {
2  box-shadow: 1px 1px 6px 0px #ccc;
3  width: 300px;
4  height: 300px;
5  padding: 20px;
6  display: flex;
7  flex-direction: column;
8  align-items: center;
9  img {
10    height: 150px;
11    width: 150px; //何故か時々適用されない部分です
12    margin-bottom: 20px;
13  }
14  h2 {
15    font-size: 30px;
16    font-family: 'Orbitron', sans-serif;
17    margin-bottom: 20px;
18  }
19  a.open-details {
20    display: block;
21    border: solid 1px black;
22    width: 100px;
23    height: 35px;
24    line-height: 35px;
25    color: black;
26    &:hover {
27    background-color: black;
28    transition: 0.2s;
29    color: white;
30    }
31  } //a.open-details
32} //.skills

fumito_94

2019/06/23 16:56

直接imgタグでwidthとheightを指定しても同じように崩れますか？

azuapricot

2019/06/24 01:08

キャッシュクリアしても駄目で、サーバー側と連携して非同期通信とかしてるようなら、JSの処理の順番が時間によって変わってしまってる可能性とかもありますけどうーんってかんじですね

take-t.t.

2019/06/25 05:47 編集

返信が遅れてしまい申し訳ありません。 >fumito_94　さんはい、htmlのタグ内に「width="150" height="150"」と「style="width:150px;height:150px"」どちらで指定しても何故かheightが不意に113pxになります... >azuapricot　さんキャッシュを削除しても変わりませんでした。非同期通信についてはむしろSPAから普通のwebページに変えたので、私の体感では逆に使わなくなったらこの問題が出てきた、という風に感じています。それと私の確認不足で恐縮なのですが、試しにedgeとfirefoxで見てみるとこの問題は起きませんでした。以上を踏まえまして一度質問文を書き直させていただきます。