Q&A
横幅を変化させると、画像の変化に合わせて、文字も画像に合わせて動いてほしいが、画像の下に入ってしまいます。
文字にoverflow:visible;をつけても変わらない。
当たり前だけど、画像の親要素につけると、画像の変化に対応しない。
absoluteでrelativeからはみ出せないし。
何かいい考えがありましたら、教えていただければ幸いです。
この画像の幅を変化させたときに、画像に対して文字の位置はこのままでいてほしいです
画像の幅を変化させるとの下に文字が入ってしまいます。
html
1<div class="co"> 2 <div class="cal"> 3 <div class="cal-item"> 4 <picture> 5 <source media="(max-width: 767px)" srcset="../final-exam/images/final-exam-assets/cover/cover_sp_2.jpg"> 6 <source media="(min-width: 768px)" srcset="../final-exam/images/final-exam-assets/cover/cover_pc_2.jpg"> 7 <img src="images/final-exam-assets/cover/cover_pc_2.jpg" alt="2"> 8 </picture> 9 <div class="cal-t3"> 10 <p class="cal-te4">3日で</p><p class="cal-te42">完結!</p> 11 </div> 12 <div class="cal-t4"> 13 <p class="cal-te5">英検集中</p><p class="cal-te52">プログラム</p> 14 </div> 15 </div> 16 </div> 17</div>
css
1.cal-item{ 2 padding-left: 1.45%!important; 3} 4 5.cal-item picture { 6 position: relative; 7 display: block; 8 margin-bottom: 6px!important; 9 border-radius: 0 0 0 100px!important; 10 overflow: hidden; 11 object-fit: cover; 12} 13 14.cal-t1{ 15 position: absolute; 16 top: 326px; 17 left:28px; 18 padding: 10px; 19 width: 208px; 20 height: 54px; 21 border-radius: 0 8px 8px 0; 22 background-color: rgba(255,255,255,0.8); 23} 24 25.cal-te1,.cal-te12{ 26 display: inline-block; 27 line-height: 1; 28 font-size: 25px; 29 font-weight: bold; 30 color: #f2a118; 31} 32 33.cal-te1{ 34 padding-left: 5px; 35 padding-top: 2px; 36} 37 38.cal-te12{ 39 font-size: 20px; 40} 41 42.cal-te2,.cal-te22{ 43 display: inline-block; 44 line-height: 1; 45 font-size: 25px; 46 font-weight: bold; 47 color: #46c017; 48} 49 50.cal-te2{ 51 margin-left: -1px; 52} 53 54.cal-te22{ 55 font-size: 20px; 56} 57 58.cal-t2{ 59 position: absolute; 60 top: 388px; 61 left:28px; 62 padding: 14px 16px 15px 16px; 63 width: 210px; 64 height: 54px; 65 border-radius: 0 8px 8px 0; 66 background-color: rgba(255,255,255,0.8); 67}
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/03/20 23:41