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

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

ただいまの
回答率

88.92%

要素を重ねた際に、片方の要素の幅のみ変えて高さを揃える方法

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,063

newyee

score 155

要素を重ねた際に、下の要素の画像の幅をブラウザいっぱいにし、高さは、上の画像と同じにしたいのですが、良い方法はありますでしょうか? 
コードは長い為、codepenにて上げさせていただきました。
codepenのリンクになります
具体的には、「back_slide_wrapper」内の画像の高さを、「slide_wrapper」内の画像の高さに合わせたいです。ですが、「back_slide_wrapper」内の横幅はブラウザいっぱいに広げたいです。
「back_slide_wrapper」内の画像の高さと、「slide_wrapper」内の画像の高さを指定し、揃えれば良いのかなとも思ったのですが、できるだけレスポンシブルに作成したいと考え為、パーセント指定で揃える方法を考えたのですが、高さをそろえる方法がみつかりませんでした。
どなたか、良い方法を教えて頂けましたら、幸いです。
よろしくお願いします。
「back_slide_wrapper」と、「「slide_wrapper」の画像が重なっている部分の画像になります。
イメージ説明

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>heair_salon</title>
    <link rel="stylesheet" type="text/css" href="normalize.css" >
    <link rel="stylesheet" type="text/css" href="heair_salon.css" >
    <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
</head>
<body>
    <header>
        <div class="header_menu_wrap display_flex">

            <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>
                <ul class="header_menu display_flex" >
                <li><a href="#">HOME<p class="header_menu_ruby">ホーム</P></a></li>
                <li><a href="#">SALON<p class="header_menu_ruby">サロン検索</p></a></li>
                <li><a href="#">SPECIAL<p class="header_menu_ruby">特集コンテンツ</p></a></li>
                <li><a href="#">CATALOG<p class="header_menu_ruby">ヘアカタログ</p></a></li>
                <li><a href="#">RECRUIT<p class="header_menu_ruby">採用情報</p></a></li>
                <li><a href="#">CONCEPT<p class="header_menu_ruby">コンセプト</p></a></li>
            </ul>
            <p class="yoyaku_box">
                <a href="#">サロンからweb予約</a>
            </p>

        </div>
    </header>
    <div class="main_contens">
        <div class="main_top_navi">
            <ul class="top_navi_list">
                <li><a href="#">美容室Ash</a></li>
                <li><a href="#">サロン検索</a></li>
                <li><a href="#">横浜市エリア</a></li>
                <li><a href="#"><span class="text_bold">Beesセンター北店</span></a></li>
            </ul>
        </div>
    </div>
    <div class="main_contents">
        <div class="slide_wrapper">
            <div class="slide_animation slide_animation_1">
                <img src="https://dl.dropboxusercontent.com/s/fmwmzopzqngf0c7/shop_img1.webp?dl=0">
            </div>
            <div class="slide_animation slide_animation_2">
                <img src="https://dl.dropboxusercontent.com/s/ydb1ibzierytfc8/shop_img2.webp?dl=0">
            </div>
            <div class="slide_animation     slide_animation_3">
                <img src="https://dl.dropboxusercontent.com/s/pxhnp870hj56y8q/shop_img3.webp?dl=0">
            </div>
        </div>
      <div class="back_slide_wrapper">
                <div class="back_img back_animation">
                    <img src="https://dl.dropboxusercontent.com/s/fmwmzopzqngf0c7/shop_img1.webp?dl=0">
                </div>
                <div class="back_img back_animation">
                    <img src="https://dl.dropboxusercontent.com/s/ydb1ibzierytfc8/shop_img2.webp?dl=0">
                </div>
                <div class="back_img back_animation">
                    <img src="https://dl.dropboxusercontent.com/s/pxhnp870hj56y8q/shop_img3.webp?dl=0">
                </div>
        </div>
    </div>
</body>

</html>
.header_logo{
    margin:10px;
    position:relative;
    top:5px;
    left:7px;
}
.display_flex{
    display:flex;   
}
.header_menu_wrap{
    display:flex;
    align-items:center;
}

.header_menu{
    display:flex;
    padding:0;
    height:55px;
    width:75%;

}
.header_menu li + li{
    border-left:1px solid #DDDDDD;
}
.header_menu li {
    height:55px;
    width:16.666%;
    /* margin:10px 0;
    padding:0 34px; */
    list-style:none;
    font-family:'Quicksand',sans-serif;
    /* text-align:center;
    padding:20px; */
} 


.header_menu li a{
    text-decoration:none;
    color:#666;
    font-size:15px;
    font-weight:bold;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    height:55px;
    width:16.666%;

}
.header_menu li a:hover{
  color: #999;
}
.header_menu_ruby{
    color:#999;
    margin:0;
    font-size:10px;
    font-weight:400;

}


.yoyaku_box a{
    text-decoration:none;
    background-color:#FF9999;
    color:#fff;
    padding:14px 45px;
    position:relative;
    display:block;
    text-align:center;

}
.yoyaku_box a:before{
    content:"";
    width:20px;
    height:20px;
    background-image:url(img/common_sprite.png);
    position:absolute;
    background-size:110px;
    top:28%;
    left:10%;
}
.yoyaku_box{
    width:18%;
}
.main_top_navi li{
    list-style:none;
}
.main_top_navi a{
    text-decoration:none;
    cursor:pointer;
}
.top_navi_list{
    display:flex;
    padding-left:20px;
    padding-top:10px;
    padding-bottom:28px;
    background-color:#f5f5f5;
    position:relative;
}

.top_navi_list li + li{
    margin-left:45px;
}
.top_navi_list li:after{    
    content:url(img/bc_arrow.png);
    position:absolute;
    top:0;
    width:17px;
    height:51px;
    margin-left:9px;
}
.top_navi_list li:last-child:after{
    content:none;
}
.top_navi_list li a {
    position:relative;
    top:8px;
    color:#666;
}
.top_navi_list li {
    font-size:12px;
}
.text_bold{
    font-weight:bold;   
}
.slide_wrapper{
    width:1280px;
    max-width:100%;
    position:relative;
    margin:0 auto;

}
.slide_animation{
    animation-name:slide;
    animation-duration:8s;
    animation-iteration-count:infinite;
    opacity:1;
    position:absolute;

}
@keyframes slide{
    0%{opacity:1;}
    33.33333%{opacity:0;}
    66.66666%{opacity:0;}
    100%{opacity:1;}
}
.main_img{
    width:100%;
}
.slide_animation img{
    width:100%;
    height:100%;
}
.slide_animation_1{
    animation-delay:0s;
}
.slide_animation_2{
    animation-delay:2.6s;

}
.slide_animation_3{
    animation-delay:5.2s;
}
.back_slide_wrapper{
    position:absolute;
    width:100%;
    height:100%;
    z-index:-1;
    top:170px;
}
.back_animation{
    position:absolute;
    width:100%;
    height:100%;
}
.back_animation img{
    width:100%;
    height:100%;
}


こちらの方にも、コードの方記載いたしました

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • newyee

    2018/11/18 13:29

    貼らせていただきました、URLの、デベロッパーツールにて確認したのですが、body部分のクラス「mvContainer」内のぼやけている部分を作っていきたいと考えております

    キャンセル

  • newyee

    2018/11/18 15:25

    少し、質問したいことが、色々と混乱してしまっているため、質問したいことをまとめ、一度質問を立て直した方がよろしいでしょうか?

    キャンセル

  • 退会済みユーザー

    2018/11/20 10:29

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 3

checkベストアンサー

0

うまく動くかな?

<div class="slide">
  <div style="background-image:url(https://picsum.photos/g/300/200?image=0);"><img src="https://picsum.photos/g/300/200?image=0"></div>
  <div style="background-image:url(https://picsum.photos/g/300/200?image=1);"><img src="https://picsum.photos/g/300/200?image=1"></div>
  <div style="background-image:url(https://picsum.photos/g/300/200?image=2);"><img src="https://picsum.photos/g/300/200?image=2"></div>
</div>
* {
  margin: 0;
  padding: 0;
}
.slide{
  position: relative;
}
.slide>div {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  text-align: center;
  overflow: hidden;
  position: absolute;
  z-index: 0;
  width: 100%;
}

.slide>div::before {
  content: '';
  background: inherit;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -99;
}
@keyframes sampleslide {
  0% {
    opacity:0;
  }
  15% {
     opacity:1;
  }
  33% {
     opacity:1;
  }
  45% {
     opacity:0;
  }
  100% {
     opacity:0;
  }
}
.slide > div{
  animation:sampleslide 9s 0s infinite;
}
.slide > div:nth-of-type(1){
    -moz-animation-delay:0s;
    -webkit-animation-delay:0s;
    animation-delay:0s;
}
.slide > div:nth-of-type(2){
    -moz-animation-delay:3s;
    -webkit-animation-delay:3s;
    animation-delay:3s;
  }
.slide > div:nth-of-type(3) {
    -moz-animation-delay:6s;
    -webkit-animation-delay:6s;
    animation-delay:6s;
}

高さとかの関係でちょっとレイアウトがズレるかもですがやりたいことはこういうことでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/26 21:57

    ご返信ありがとうございます。
    いえいえ...
    すみません。
    よろしくお願いします。

    キャンセル

  • 2018/11/27 16:56

    回答は「ぼかした背景とその中身をスライドする」だけのコードなので前後にコンテンツを入れるだけでも多分レイアウトがずれたりします。

    とりあえず、質問に提示のコード&模写元のコードと私の回答のコードの大きな違いは「divをまとめてしまっている」ことなので、.slide > divに対して高さを指定していません。
    中のコンテンツの高さに合わせて背景の高さも変わっているため、もともとの疑問の「どう高さを合わせたらいいか」についての解決にはなっていないかもしれません。
    また、レスポンシブ対応も全く視野に入れていないのでこの辺りもきちんと調整しないといけない部分ですね。
    もう一つ、blur(というかfilter)はIE非対応だったと思うのでこれの対処も必要かも。

    というわけで、「こう書けば似たようなことはできるんだな」くらいに捉えていただいたほうがいいかと思います。

    キャンセル

  • 2018/11/27 17:39

    分かりました。そのようなことも可能なんだなと思い、先に進んでいくというのも必要ですよね。
    ご丁寧にご回答下さりありがとうございました。

    キャンセル

0

あなたはまずpositionを使ったときの要素の高さについて、勉強すべきですね。

とりあえず、下記でいいです?

.main_contents {
  position: relative;
}
.main_contents::before {
  content: '';
  display: block;
  padding-top: calc(867 / 1300 * 100%);
}
.back_slide_wrapper{
  position:absolute;
  top: 0;
  left: 0; 
  width:100%;
  height:100%;
  z-index:-1;
}
.slide_wrapper{
  width:1280px;
  max-width:100%;
  height: 100%;
  position:absolute;
  margin:0 auto;
  top: 0;
  left: 0;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/19 18:54

    コードとかけ離れている部分とはどの部分のことでしょうか...?

    キャンセル

  • 2018/11/20 10:28

    back_slide_wrapperの高さをslide_wrapper内の画像の高さと同じにしつつ、幅は画面いっぱいとなると、画像の縦横比が変わります。
    そのため、参考元サイトでは、imgではなく、background属性を使って、画像を切り取っているんです。
    あなたはご自身の勉強のためにされていると思うのですが、まずはpositionの使い方を勉強しないことには、この問題を解決(提示されたコードを丸写し)したところで全く意味がありません。
    また同じような問題に突き当たるでしょう。
    問題は順番に解決(理解)していく必要があり、その上で、positionの勉強をまずはしてください。
    とお伝えしています。

    キャンセル

  • 2018/11/20 11:22

    正直な所としましては、「幅は画面いっぱいとなると、画像の縦横比が変わります。」ここの部分におきましてもどういうことなのか分からない状態です...
    分かりました。positionについて調べてみたいとおもいます。

    キャンセル

0

「back_slide_wrapper」と「slide_wrapper」がどう合わせたいかが想像できませんが、スライドを作りたいだけならJavaScriptでやってしまえばよいのでは。

【レスポンシブ対応でjQuery不要の高機能スライダー「Swiper」 | Will Style Inc.|神戸にあるウェブ制作会社】
https://www.willstyle.co.jp/blog/724/

【Swiper - Most Modern Mobile Touch Slider】
https://idangero.us/swiper/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/21 19:42

    僕自身、うまく理解できていない部分はあるのかもしれませんが、意思疎通がうまくできていないと感じております。
    >.slide_wrapperの中に背景用の画像をおいて、position:absolute;で左右において
    ここに関しましても、どのようにすれば良いかが具体的に分かりません。

    キャンセル

  • 2018/11/26 09:23

    >ここに関しましても、どのようにすれば良いかが具体的に分かりません。
    つまりまだあなたは勉強が足りないということです。
    知識レベルと実現したいことのレベルに乖離があります。
    もっと基礎から学習しましょう。

    キャンセル

  • 2018/11/26 20:10

    基礎は一通り勉強しました。
    今回のpositionプロパティのことに関しましては、意思疎通がうまくできていなかったことが原因だと思っています。僕自身、言いたいことをうまく伝えられなかったと思っていますし。

    キャンセル

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

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る