멀티미디어 요소에 가변너비 적용하기

너비와 최대너비에 % 너비값을 주어 가변적으로 보이도록 함

width: 100%;

max-width: 100%;



html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <style>
    /** 전체박스 */
    #wrap {
        width: 90%;
        margin: 0 auto;
        border: 4px solid #00f;
    }
    #wrap div {
        display: inline-block;
        width: 50%;
        margin: 0 auto;
    }    
    img, video {
        /* 너비와 최대너비에 % 너비값을 주어 가변적으로 보이도록 함 */
        width: 100%;
        max-width: 100%;    /* max-width: 100% 요소의 기본크기 이상으로 늘어나지 않는다 */
    }
    </style>
    <style>
    </style>
    <title>Insert title here</title>
</head>
 
<body>
<div id="wrap">
    <div>
        <video controls>
            <source src="source/video.mp4" type="video/mp4"></source>
            <source src="source/video.ogv" type="video/ogg"></source>
            <source src="source/video.webm" type="video/webm"></source>
        </video>
    </div><div>
        <img src="source/img_01.jpg" />    
    </div>
</div>
</body>
</html>
cs



결과

화면너비에 상관없이 멀티미디어 요소 너비가 변한다

 


저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

안드로이드 뷰플리퍼(View Flipper) 사용하여 화면 슬라이드 구현하기  (6) 2016.08.21
반응형웹 미디어쿼리 예제  (0) 2016.08.21
반응형웹 em, rem, vw, vh, vmin, vmax  (0) 2016.08.21
반응형웹 가변 패딩(padding)주기  (0) 2016.08.21
반응형웹 가변 마진(margin)주기  (0) 2016.08.21

+ Recent posts

티스토리툴바