Html&CSS/html5&css3

0226_html5/css3_background-size

.Epona. 2020. 3. 4. 02:24 

 <style>
         
    .contain{
         border:1px solid green; margin-bottom: 20px; width:300px; height: 100px;
         background:url(img1.gif) no-repeat; /*원본사이즈:500*320*/
         background-size:contain 
     }
     
     .cover{  /*커버를 더 많이 씀*/
         border:1px solid green; margin-bottom: 20px; width:300px; height: 100px;
         background:url(img1.gif) no-repeat; /*원본사이즈:500*320*/
         background-size:cover 
     }
     
     .auto{
         border:1px solid green; margin-bottom: 20px; width:300px; height: 100px;
         background:url(img1.gif) no-repeat; /*원본사이즈:500*320*/
         background-size:auto; /*이미지 크기 그대로 보여줌: web작업 시 많이 사용*/
     }
         
     .size{
         border:1px solid green; margin-bottom: 20px; width:300px; height: 100px;
         background:url(img1.gif) no-repeat; 
         background-size: 100px 60px;  /*모바일에서 작업 시 많이 사용*/
     }
     
     
        
 </style>        
</head>
       
        
<body>


    
<h3>[background-size]</h3>
    <!--모바일 작업 시 많이 사용-->
    <div class="contain">이미지 전체가 지정한 표시 영역에 모두 들어갈 수 있는 최대 크기로 표현되는것을 말함</div>
    
    <div class="cover">해당 이미지 하나만으로 표시영역을 덮을 수 있는 최소 크기::contain보다는cover 많이 씀</div>
    
    <div class="auto">이미지를 자동으로 이미지 표현 auto::웹에서 많이 사용 </div>
    
    <div class="size">배경이미지 크기 변경::모바일에서 많이 사용 </div>
    
 
      
</body>

 

EX_html5_background-size.zip
0.08MB

 

저작자표시 비영리 변경금지