要素を重ねた際に、下の要素の画像の幅をブラウザいっぱいにし、高さは、上の画像と同じにしたいのですが、良い方法はありますでしょうか?
コードは長い為、codepenにて上げさせていただきました。
codepenのリンクになります
具体的には、「back_slide_wrapper」内の画像の高さを、「slide_wrapper」内の画像の高さに合わせたいです。ですが、「back_slide_wrapper」内の横幅はブラウザいっぱいに広げたいです。
「back_slide_wrapper」内の画像の高さと、「slide_wrapper」内の画像の高さを指定し、揃えれば良いのかなとも思ったのですが、できるだけレスポンシブルに作成したいと考え為、パーセント指定で揃える方法を考えたのですが、高さをそろえる方法がみつかりませんでした。
どなたか、良い方法を教えて頂けましたら、幸いです。
よろしくお願いします。
「back_slide_wrapper」と、「「slide_wrapper」の画像が重なっている部分の画像になります。
htm
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>heair_salon</title> 6 <link rel="stylesheet" type="text/css" href="normalize.css" > 7 <link rel="stylesheet" type="text/css" href="heair_salon.css" > 8 <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet"> 9</head> 10<body> 11 <header> 12 <div class="header_menu_wrap display_flex"> 13 14 <h1 class="header_logo"><a href="#"><img src="https://dl.dropboxusercontent.com/s/jo1vhnbcyjhhdpl/header_logo.webp?dl=0" alt="blandlogo" width="58px" height="55px"></a></h1> 15 <ul class="header_menu display_flex" > 16 <li><a href="#">HOME<p class="header_menu_ruby">ホーム</P></a></li> 17 <li><a href="#">SALON<p class="header_menu_ruby">サロン検索</p></a></li> 18 <li><a href="#">SPECIAL<p class="header_menu_ruby">特集コンテンツ</p></a></li> 19 <li><a href="#">CATALOG<p class="header_menu_ruby">ヘアカタログ</p></a></li> 20 <li><a href="#">RECRUIT<p class="header_menu_ruby">採用情報</p></a></li> 21 <li><a href="#">CONCEPT<p class="header_menu_ruby">コンセプト</p></a></li> 22 </ul> 23 <p class="yoyaku_box"> 24 <a href="#">サロンからweb予約</a> 25 </p> 26 27 </div> 28 </header> 29 <div class="main_contens"> 30 <div class="main_top_navi"> 31 <ul class="top_navi_list"> 32 <li><a href="#">美容室Ash</a></li> 33 <li><a href="#">サロン検索</a></li> 34 <li><a href="#">横浜市エリア</a></li> 35 <li><a href="#"><span class="text_bold">Beesセンター北店</span></a></li> 36 </ul> 37 </div> 38 </div> 39 <div class="main_contents"> 40 <div class="slide_wrapper"> 41 <div class="slide_animation slide_animation_1"> 42 <img src="https://dl.dropboxusercontent.com/s/fmwmzopzqngf0c7/shop_img1.webp?dl=0"> 43 </div> 44 <div class="slide_animation slide_animation_2"> 45 <img src="https://dl.dropboxusercontent.com/s/ydb1ibzierytfc8/shop_img2.webp?dl=0"> 46 </div> 47 <div class="slide_animation slide_animation_3"> 48 <img src="https://dl.dropboxusercontent.com/s/pxhnp870hj56y8q/shop_img3.webp?dl=0"> 49 </div> 50 </div> 51 <div class="back_slide_wrapper"> 52 <div class="back_img back_animation"> 53 <img src="https://dl.dropboxusercontent.com/s/fmwmzopzqngf0c7/shop_img1.webp?dl=0"> 54 </div> 55 <div class="back_img back_animation"> 56 <img src="https://dl.dropboxusercontent.com/s/ydb1ibzierytfc8/shop_img2.webp?dl=0"> 57 </div> 58 <div class="back_img back_animation"> 59 <img src="https://dl.dropboxusercontent.com/s/pxhnp870hj56y8q/shop_img3.webp?dl=0"> 60 </div> 61 </div> 62 </div> 63</body> 64 65</html>
css
1.header_logo{ 2 margin:10px; 3 position:relative; 4 top:5px; 5 left:7px; 6} 7.display_flex{ 8 display:flex; 9} 10.header_menu_wrap{ 11 display:flex; 12 align-items:center; 13} 14 15.header_menu{ 16 display:flex; 17 padding:0; 18 height:55px; 19 width:75%; 20 21} 22.header_menu li + li{ 23 border-left:1px solid #DDDDDD; 24} 25.header_menu li { 26 height:55px; 27 width:16.666%; 28 /* margin:10px 0; 29 padding:0 34px; */ 30 list-style:none; 31 font-family:'Quicksand',sans-serif; 32 /* text-align:center; 33 padding:20px; */ 34} 35 36 37.header_menu li a{ 38 text-decoration:none; 39 color:#666; 40 font-size:15px; 41 font-weight:bold; 42 display:table-cell; 43 vertical-align:middle; 44 text-align:center; 45 height:55px; 46 width:16.666%; 47 48} 49.header_menu li a:hover{ 50 color: #999; 51} 52.header_menu_ruby{ 53 color:#999; 54 margin:0; 55 font-size:10px; 56 font-weight:400; 57 58} 59 60 61.yoyaku_box a{ 62 text-decoration:none; 63 background-color:#FF9999; 64 color:#fff; 65 padding:14px 45px; 66 position:relative; 67 display:block; 68 text-align:center; 69 70} 71.yoyaku_box a:before{ 72 content:""; 73 width:20px; 74 height:20px; 75 background-image:url(img/common_sprite.png); 76 position:absolute; 77 background-size:110px; 78 top:28%; 79 left:10%; 80} 81.yoyaku_box{ 82 width:18%; 83} 84.main_top_navi li{ 85 list-style:none; 86} 87.main_top_navi a{ 88 text-decoration:none; 89 cursor:pointer; 90} 91.top_navi_list{ 92 display:flex; 93 padding-left:20px; 94 padding-top:10px; 95 padding-bottom:28px; 96 background-color:#f5f5f5; 97 position:relative; 98} 99 100.top_navi_list li + li{ 101 margin-left:45px; 102} 103.top_navi_list li:after{ 104 content:url(img/bc_arrow.png); 105 position:absolute; 106 top:0; 107 width:17px; 108 height:51px; 109 margin-left:9px; 110} 111.top_navi_list li:last-child:after{ 112 content:none; 113} 114.top_navi_list li a { 115 position:relative; 116 top:8px; 117 color:#666; 118} 119.top_navi_list li { 120 font-size:12px; 121} 122.text_bold{ 123 font-weight:bold; 124} 125.slide_wrapper{ 126 width:1280px; 127 max-width:100%; 128 position:relative; 129 margin:0 auto; 130 131} 132.slide_animation{ 133 animation-name:slide; 134 animation-duration:8s; 135 animation-iteration-count:infinite; 136 opacity:1; 137 position:absolute; 138 139} 140@keyframes slide{ 141 0%{opacity:1;} 142 33.33333%{opacity:0;} 143 66.66666%{opacity:0;} 144 100%{opacity:1;} 145} 146.main_img{ 147 width:100%; 148} 149.slide_animation img{ 150 width:100%; 151 height:100%; 152} 153.slide_animation_1{ 154 animation-delay:0s; 155} 156.slide_animation_2{ 157 animation-delay:2.6s; 158 159} 160.slide_animation_3{ 161 animation-delay:5.2s; 162} 163.back_slide_wrapper{ 164 position:absolute; 165 width:100%; 166 height:100%; 167 z-index:-1; 168 top:170px; 169} 170.back_animation{ 171 position:absolute; 172 width:100%; 173 height:100%; 174} 175.back_animation img{ 176 width:100%; 177 height:100%; 178}
こちらの方にも、コードの方記載いたしました
回答3件
あなたの回答
tips
プレビュー