18 - CSS (반응형 이미지, 동영상)

반응형 이미지

`<img>태그`

<style>
	img{
    width:100%;
    /*max-width: 500px 이미지 최대 넓이 고정!*/ 
    }
</style>

`background-image`

<style>
	width: 100vw;
    height: 100vh;
    background-image: url(https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Y2l0eXxlbnwwfHwwfHw%3D&w=1000&q=80);
    background-repeat: no-repeat;
    background-size: cover; /*contain 사용하면 최대한으로 늘리는것이기에 여백이 생길 수 있음*/
    background-position: center; /*반응형으로 해주기위한 장치!*/
</style>

<body>
	<article></article>
</body>

bacground-size가 contain 이면 ?

bacground-size가 cover 사용하면 ?

반응형 동영상

`<video>태그`

video태그 img태그 처럼 똑같이 width만 100%주면 반응형 됨!

Video 속성
preload =“none”, “auto”; : 페이지를 로드할때 영상을 미리 로드할지 말지 결정함
Poster : 비디오를 내려받을 동안 혹은 영상을 재생할때까지 표시할 이미지를 지정함
Controls : 브라우저가 재생에 필요한 컨트롤러를 제공할지 지정함
Autoplay: 파일이 다운로드가 완료되면 자동으로 재생될지 지정하는 속성
Muted: 소리 끄기
Loop : 비디오가 끝나고 반복적으로 재생할지 지정함

`<iframe>태그`

<iframe 
        class="video-next-level"
        src="https://www.youtube.com/embed/4TWR90KJl84?autoplay=1&mute=1&loop=1&playlist=4TWR90KJl84&controls=1"
        title="YouTube video player" 
        frameborder="0" 
        allowfullscreen>
</iframe>

반응형으로 맞춰주려면 ?

	.video-next-level {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

문제는 ? 비율에 따른 검은 여백이 생김!

해결은 ?

padding-top으로 높이 조정함!
넓이에따라 높이를 계산해주기 위해 사용함
종횡비 계산 : 넓이 나누기 높이!
ex)원본 사이즈 : 1280 720
720/1280 = 0.5625
따라서 padding-top = 0.5625100 = 56.25%

  .cont-video {
        position: relative;
        padding-top: 56.25%;
        /* padding-top, padding-bottom 속성의 % 값은 부모 요소의 넓이에 비례한다. */
        /* 예를 들어 부모의 넚이가 1200px 이라면 padding-top=50% 의 값은 600px 과 같다. */
      }

 <article class="cont-video">
      <iframe
        class="video-next-level"
        src="https://www.youtube.com/embed/4TWR90KJl84?autoplay=1&mute=1&loop=1&playlist=4TWR90KJl84&controls=1"
        title="YouTube video player"
        frameborder="0"
        allowfullscreen
      ></iframe>
    </article>

<article>태그로 감싸주고, article 태그에 position: relative, <iframe>태그는 position:absolute를 줘서 paading-top 비율 계산하여 넣어주기!

Author And Source

이 문제에 관하여(18 - CSS (반응형 이미지, 동영상)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sgsg9447/TIL18-CSS-반응형-이미지-동영상

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다