고정 너비의 상위 요소의 하위 요소를 너비 100%의 CSS로 설정

하위 요소의 브라우저 너비를 100% 표시하는 데 사용되는 CSS입니다.
응답 디자인에서 내용 고정 너비, 이미지 너비 100%의 경우
자주 사용하기 때문에mixin으로 등록하면 편리합니다.

프레젠테이션

See the Pen OJVLZLv by harumi-sato ( @harumi-sato )
on CodePen .

코드

가로 폭을 브라우저 너비로 설정 = 100vw

좌우의 margin은 -50vw로 계산합니다.

(이것은 하위 수치의 영향을 받지 않는 스마트 해결 방법입니다!

SCSS

//@include fullsize
@mixin fullsize {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.contents{
  width:600px; //固定幅
  margin:0 auto;
  background:lightgreen;
}

.child{
  @include fullsize;
  img{
    width:100%;
    height:auto;
  }
}

HTML

<div class="contents">
  <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
  <div class="child"><img src="//via.placeholder.com/350x150" alt=""></div>
  <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>

총결산

-50vw 마이너스 margin 설정,

하위 요소의 너비에 영향을 받지 않고 가로 100% 로 지정할 수 있습니다.p>

Reference

이 문제에 관하여(고정 너비의 상위 요소의 하위 요소를 너비 100%의 CSS로 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/flatsato/items/1d2bd6af458753cde860

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

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

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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