タイトル通り画像に指定した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}’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’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’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
回答1件
あなたの回答
tips
プレビュー