이미지를 페이지에 여백없이 채우는 방법

조회수 14317회

안녕하세요. 웹사이트를 처음 만들어보는 초보입니다. 공부를 위해 기존에 있는 사이트를 보고 따라 만들어보고 있습니다.

크롬 창의 크기를 줄여보니 그림도 비례해서 같이 줄어들어버리네요.. 창의 크기를 줄였을때 비율이 두 번째 그림과 같이 되어야합니다.(이미지가 다른 것은 신경쓰지 않으셔도 됩니다. 공부용으로 따라만드는 것이라 다른 이미지입니다.)

세번째 이미지는 화면을 줄이기 전의 화면입니다.

<div id="bgd"></div>
    <div id="content" class="container-max">
        <h1>We are #500 Strong</h1>
        <p>Meet our badass, global family of startup founders, mentors, and investors</p>
        <a href="#home" id="your-move"><strong>start here</strong></a>
body {
    font-family: 'Open Sans', sans-serif;
}

#bgd {
    position: absolute;
    background-image: url("img/1.jpg");
    background-size: 121%;
    background-repeat: no-repeat;
    top:0;
    left:0;
    bottom:0;
    right:0;
    height: auto;
    min-height: 1500px;
}

.container-max{
    max-width: 1200px;
}

#content {
    color: #f2f2f2;
    position: relative;
    margin-left: 18%;
    margin-top: 9.5%;
}

#content h1 {
    font-family: "Exo 2","Helvetica Neue",Helvetica,sans-serif;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 74px;
    margin: 1.25em 0 0.2em;
    letter-spacing: -2px;
}

#content p {
    margin: 0 0 1.313em;
    font-size: 20px;
    font-weight: 300;
}

#content #your-move {
    text-decoration: none;
    text-transform: uppercase;
    color: #f2f2f2;
    border: 1px solid #ac1100;
    border-color: #b43322;
    background-color: #b43322;
    display: inline-block;
    padding: 19px;
    font-size: 19px;
}

#content #your-move:hover {
    border-color: #891e1b;
    background-color: #891e1b;
}

이미지

이미지

이미지

2 답변

  • 다음의 조건을 만족하면 되는거겠죠?

    • A영역이 있습니다.
    • A영역의 배경으로 B이미지를 사용하고자 합니다.
    • A영역에 B이미지가 좌우상하로 여백없이 채워집니다.
    • B이미지의 넓이보다 A영역의 넓이가 커지게되면, 상하좌우를 중심으로 이미지가 확대됩다.
    • B이미지는 최소 넓이를 가지며, A영역의 넓이가 줄어도 이미지는 최소 넓이만큼은 유지됩니다.
    • B이미지의 비율은 고정됩니다.

    아래의 코드를 참고하세요.

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <style>
            /*###### 이부분이 이미지에대한 CSS옵션입니다. ######*/
            .image{
                height: 726px;
                background: url(http://s3.amazonaws.com/blog.invisionapp.com/uploads/2016/05/product-strategy-hero.jpg) no-repeat center center; 
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
                background-position: center;
            }
           /*###### 여기까지 ######*/
        </style>
      </head>
      <body style="margin: 0px">
        <div class="image"`>
        </div>
      </body>
    </html>
    

    실행해보기 : codepen


    1. google에 "html background image full width fixed height position center"의 키워드로 검색해서 나오는 정보들을 확인합니다.
    2. 그 검색결과중 css trick에 정리가 잘되어있네요.
    • 감사합니다. 도움 많이 되었습니다 ㅎㅎ추가로 창을 축소시켜도 cover의 하단을 여백으로 만드는 방법을 가능하다면 알고 싶습니다. 사진의 하단에는 http://500.co/ 여기서 보이는 것처럼 메뉴바를 넣고싶어서요. 아니면 메뉴바를 만든후에 z-index로 배경사진에 겹치면 될까요? 알 수 없는 사용자 2016.6.5 18:55
  • 감사합니다. 도움 많이 되었습니다 ㅎㅎ추가로 창을 축소시켜도 cover의 하단을 여백으로 만드는 방법을 가능하다면 알고 싶습니다. 사진의 하단에는 http://500.co/ 여기서 보이는 것처럼 메뉴바를 넣고싶어서요. 아니면 메뉴바를 만든후에 z-index로 배경사진에 겹치면 될까요?

    추가 질문인거 같아서 댓글을 여기다 옮겨놓고 답변을 달아볼게요. 사실 500.co사이트의 방식과 제가 적을 방식은 약간 다를 수 있는데요. 보이는부분은 같을거같아서 정리해봐요. 참고하세요. 결국 500.co 사이트의 시작페이지의 이미지의 높이는 image의 높이 = view-port 높이 - navigation bar의 높이 의 규칙처럼 보이는데요. 이걸 css에서 처리하면 아래와 같습니다. 일단 네비게이션바 높이는 54px입니다.

    height: calc(100vh - 54px);
    /*  vh = viewport height  */
    

    그리고 경우에따라서는 이미지의 최소한의 높이는 정해줘야하기 때문에

    min-height: 200px;
    

    를 같이 붙여줍니다. 전체 코드로 같이보면 아래와 같습니다. 메뉴바(nav)를 같이 보여드리려고, 부트스트랩좀 가져다 쓰다보니 코드가 좀 길어졌는데, 무시할것들 무시하시고, 천천히 보면 아까 올린 답변과 거의 비슷하고, css의 높이부분만 다른걸 알수 있어요.

    <html lang="ko">
      <head>
        <!-- 아래의 부트스트랩 코드는 무시하세요 -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
    
        <!-- 여기서부터 css -->
        <style>
            body {
                margin: 0;
            }
            .image{
                background: url(http://s3.amazonaws.com/blog.invisionapp.com/uploads/2016/05/product-    strategy-hero.jpg) no-repeat center center; 
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
                background-position: center;
                height: calc(100vh - 54px);
                min-height: 200px;
             }   
        </style>
      </head>
    
       <body>
        <!--이 부분이 이미지 -->
        <div class="image">
        </div>
    
        <!-- 이 부분이 부트스트랩 네비게이션 바(메뉴바) -->
        <nav class="navbar navbar-light bg-faded">
          <ul class="nav navbar-nav">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
          </ul>
        </nav>
    
        <!-- 이 부분이 기타등등 내용들 -->
        <h1 class="display-1">Display 1</h1>
        <h1 class="display-2">Display 2</h1>
        <h1 class="display-3">Display 3</h1>
        <h1 class="display-4">Display 4</h1>
    
        <!-- jQuery first, then Bootstrap JS. -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
      </body>
    </html>
    

    실행해보기 : codepen

    • 감사합니다. calc 라는 기능도 있었군요. 유용하게 쓸 수 있을 기능인 것 같습니다. codepen도 함께 있으니 이해에도 도움이 많이 되었어요. 감사합니다!! :) 알 수 없는 사용자 2016.6.6 21:08

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)