디브를 어떻게 반응형 사각형으로 스타일링 할 수 있을까요?

디브를 어떻게 반응형 사각형으로 스타일링 할 수 있을까요?

이 질문에는 이미 다음과 같은 답변이 있습니다.

CSS로 디브의 종횡비 유지 (33개 답변)

닫힘8년 전에.

나는 나의 디브가 항상 너비와 같도록 높이를 조정하기를 원합니다.너비는 백분위수입니다.부모의 폭이 줄어들면 상자는 가로 세로 비율을 유지하여 감소해야 합니다.

이것을 어떻게 하는 것이 CSS입니까?

거의 모든 브라우저에서 작동합니다.

드리기를 시도해보세요.padding-bottom백분율로서

<div style="height:0;width:20%;padding-bottom:20%;background-color:red">
<div>
Content goes here
</div>
</div>

바깥쪽 디브는 사각형을 만들고 안쪽 디브는 내용을 담고 있습니다.이 솔루션은 여러 번 효과가 있었습니다.

여기 js fiddle.

원하는 것을 달성하려면 뷰포트 백분율 길이를 사용할 수 있습니다. vw.

여기 제가 jsfiddle에서 만든 간단한 예가 있습니다.

HTML:

<div class="square">
    <h1>This is a Square</h1>
</div>

CSS:

.square {
    background: #000;
    width: 50vw;
    height: 50vw;
}
.square h1 {
    color: #fff;
}

다른 방법들도 많이 있겠지만 저에게는 이 방법이 가장 좋은 것 같습니다.

HTML

<div class='square-box'>
    <div class='square-content'>
        <h3>test</h3>
    </div>
</div>

CSS

.square-box{
    position: relative;
    width: 50%;
    overflow: hidden;
    background: #4679BD;
}
.square-box:before{
    content: "";
    display: block;
    padding-top: 100%;
}
.square-content{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: white;
    text-align: center;
}

http://jsfiddle.net/38Tnx/1425/

너비(%)와 동일한 크기의 패딩 하단을 지정하는 것만큼 쉽습니다.따라서 폭이 50%인 경우 아래 예제를 사용합니다.

id or class{
    width: 50%;
    padding-bottom: 50%;
}

jsfiddle http://jsfiddle.net/kJL3u/2/ 입니다.

응답 텍스트가 포함된 편집본 : http://jsfiddle.net/kJL3u/394

다른 방법은 투명한 1x1.png를 사용하는 것입니다.width: 100%,height: auto일순간에div그리고 그 안에 절대적으로 위치한 콘텐츠:

html:

<div>
    <img src="1x1px.png">
    <h1>FOO</h1>
</div>

CSS:

div {
    position: relative;
    width: 50%;
}

img {
    width: 100%;
    height: auto;
}

h1 {
    position: absolute;
    top: 10px;
    left: 10px;
}

Fidle: http://jsfiddle.net/t529bjwc/

이것이 제가 생각해낸 것입니다.여기 바이올린이 있습니다.

우선 사각형과 가운데가 있는 텍스트 모두 3개의 포장지 요소가 필요합니다.

<div><div><div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.</div></div></div>

이것이 스타일시트입니다.사각형 모양과 가운데 있는 텍스트의 두 가지 기법을 사용합니다.

body > div {
    position:relative;
    height:0;
    width:50%; padding-bottom:50%;
}

body > div > div {
    position:absolute; top:0;
    height:100%; width:100%;
    display:table;
    border:1px solid #000;
    margin:1em;
}

body > div > div > div{
    display:table-cell;
    vertical-align:middle; text-align:center;
    padding:1em;
}

언급URL : https://stackoverflow.com/questions/19068070/how-to-style-a-div-to-be-a-responsive-square