CSS를 사용하여 div의 높이를 너비에 비례하여 조정할 수 있습니까?
내 div 높이가 항상 너비의 절반이되도록 CSS에서 변수를 설정할 수 있습니까?
<div class="ss"></div>
CSS :
.ss {
width:30%;
height: half of the width;
}
이 30 % 너비는 화면 해상도에 따라 조정됩니다.
상대 패딩 (높이 측면에서도)은 상위 요소의 너비를 기반으로하기 때문에 상위 항목에 패딩을 사용하여이를 수행 할 수 있습니다.
CSS :
.imageContainer {
position: relative;
width: 25%;
padding-bottom: 25%;
float: left;
height: 0;
}
img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
}
이것은이 기사를 기반으로합니다 : CSS 만 사용하여 반응 형 상자의 비례 적 크기 조정
이를 달성하는 또 다른 좋은 방법은 설정된 종횡비로 투명 이미지를 사용하는 것입니다. 그런 다음 이미지의 너비를 100 %로 설정하고 높이를 자동으로 설정합니다. 안타깝게도 컨테이너의 원본 콘텐츠가 아래로 내려갑니다. 따라서 원본 콘텐츠를 다른 div에 래핑하고 상위 div의 맨 위에 절대적으로 배치해야합니다.
<div class="parent">
<img class="aspect-ratio" src="images/aspect-ratio.png" />
<div class="content">Content</div>
</div>
CSS
.parent {
position: relative;
}
.aspect-ratio {
width: 100%;
height: auto;
}
.content {
position: absolute;
width: 100%;
top: 0; left: 0;
}
둘러싸는 div의 픽셀 단위로 설정된 너비에 비례하는 수직 크기 조정을 원한다면 다음과 같은 추가 요소가 필요하다고 생각합니다.
#html
<div class="ptest">
<div class="ptest-wrap">
<div class="ptest-inner">
Put content here
</div>
</div>
</div>
#css
.ptest {
width: 200px;
position: relative;
}
.ptest-wrap {
padding-top: 60%;
}
.ptest-inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #333;
}
작동하지 않는 2div 솔루션은 다음과 같습니다. 60 % 세로 패딩은 너비가 아니라 창 너비에 비례합니다 div.ptest.
다음은 작동하는 위 코드의 예입니다.
이 대답은 많은 클래스 이름을 사용하지 않는 것을 선호하는 것을 제외하고는 다른 대답과 거의 같습니다. 그러나 그것은 단지 개인적인 취향입니다. 중첩 된 div의 목적을 미리 선언하기 때문에 각 div에서 클래스 이름을 사용하는 것이 더 투명하다고 주장 할 수 있습니다.
<div id="MyDiv" class="proportional">
<div>
<div>
<p>Content</p>
</div>
</div>
</div>
다음은 일반적인 CSS입니다.
.proportional { position:relative; }
.proportional > div > div { position:absolute; top:0px; bottom:0px; left:0px; right:0px; }
그런 다음 첫 번째 내부 div를 대상으로 너비와 높이를 설정합니다 (상단 패딩).
#MyDiv > div { width:200px; padding-top:50%; }
For anyone looking for a scalable solution: I wrote a small helper utility in SASS to generate responsive proportional rectangles for different breakpoints. Take a look at SASS Proportions
Hope it helps anybody!
One way usefull when you work with images, but can be used as workaround otherwise:
<html>
<head>
</head>
<style>
#someContainer {
width:50%;
position: relative;
}
#par {
width: 100%;
background-color:red;
}
#image {
width: 100%;
visibility: hidden;
}
#myContent {
position:absolute;
}
</style>
<div id="someContainer">
<div id="par">
<div id="myContent">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<img src="yourImage" id="image"/>
</div>
</div>
</html>
To use replace yourImage with your image url. You use image with width / height ratio you desire.
div id="myContent" is here as example of workaround where myContent will overlay over image.
This works like: Parent div will adopt to the height of image, image height will adopt to width of parent. However image is hidden.
You can use View Width for the "width" and again half of the View Width for the "height". In this way you're guaranteed the correct ratio regardless of the viewport size.
<div class="ss"></div>
.ss
{
width: 30vw;
height: 15vw;
}
'developer tip' 카테고리의 다른 글
| 아직 시작되지 않은 프로세스에 Visual Studio를 연결하려면 어떻게하나요? (0) | 2020.11.14 |
|---|---|
| 논리 프로그래밍과 기능 프로그래밍의 차이점 (0) | 2020.11.14 |
| PHP 루트 디렉토리에 txt 파일 생성 및 저장 (0) | 2020.11.14 |
| C ++ 11 std :: bind와 boost :: bind의 차이점 (0) | 2020.11.14 |
| 파이썬 목록과 혼동 : 그것들이 반복자입니까? (0) | 2020.11.14 |