CSS로 div의 종횡비 유지
div창의 너비가 변경됨에 따라 너비 / 높이를 변경할 수 있는을 만들고 싶습니다 .
가로 세로 비율을 유지하면서 너비에 따라 높이를 변경할 수있는 CSS3 규칙이 있습니까?
JavaScript를 통해이 작업을 수행 할 수 있다는 것을 알고 있지만 CSS 만 사용하는 것을 선호합니다.
다음 <div>과 같이에 대한 백분율 값 으로 래퍼 를 만듭니다 padding-bottom.
div {
width: 100%;
padding-bottom: 75%;
background: gold; /** <-- For the demo **/
}<div></div>A의이됩니다 <div>(3 종횡비 4)의 높이와 그 컨테이너의 폭의 75 % 이상.
이것은 패딩에 대한 사실에 의존합니다.
백분율은 생성 된 상자의 포함 블록 [...] 너비 와 관련하여 계산됩니다 (출처 : w3.org , 내 강조)
다른 종횡비 및 100 % 너비의 패딩 하단 값 :
aspect ratio | padding-bottom value
--------------|----------------------
16:9 | 56.25%
4:3 | 75%
3:2 | 66.66%
8:5 | 62.5%
div에 콘텐츠 배치 :
div의 가로 세로 비율을 유지하고 콘텐츠가 늘어나지 않도록하려면 절대 위치에있는 자식을 추가하고 다음을 사용하여 래퍼의 가장자리까지 늘려야합니다.
div.stretchy-wrapper {
position: relative;
}
div.stretchy-wrapper > div {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
vw 단위 :
요소 vw의 너비와 높이 모두에 단위를 사용할 수 있습니다 . 이렇게하면 뷰포트 너비에 따라 요소의 종횡비가 유지됩니다.
vw : 뷰포트 너비의 1/100입니다. [ MDN ]
또한, 당신은 또한 사용할 수있는 vh뷰포트의 높이, 또는 vmin/ vmax(토론 뷰포트 크기의 작은 / 큰를 사용하는 여기 ).
예 : 1 : 1 종횡비
div {
width: 20vw;
height: 20vw;
background: gold;
}<div></div>다른 종횡비의 경우 다음 표를 사용하여 요소의 너비에 따라 높이 값을 계산할 수 있습니다.
aspect ratio | multiply width by
-----------------------------------
1:1 | 1
1:3 | 3
4:3 | 0.75
16:9 | 0.5625
예 : 정사각형 div의 4x4 그리드
body {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
div {
width: 23vw;
height: 23vw;
margin: 0.5vw auto;
background: gold;
}<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>여기 에이 데모 가있는 Fiddle이 있으며 여기 에 수직 및 수평 중심 콘텐츠 로 반응 형 사각형 그리드 를 만드는 솔루션이 있습니다 .
vh / vw 단위에 대한 브라우저 지원은 IE9 + 입니다. 자세한 내용은 canIuse를 참조하세요.
CSS를 사용하여이 작업을 수행하는 방법을 찾았지만 웹 사이트의 흐름에 따라 변경 될 수 있으므로주의해야합니다. 내 웹 사이트의 유동적 인 너비 부분에 일정한 종횡비로 비디오를 삽입하기 위해 수행했습니다.
다음과 같은 삽입 된 동영상이 있다고 가정 해 보겠습니다.
<object>
<param ... /><param ... />...
<embed src="..." ...</embed>
</object>
그런 다음이 모든 것을 "video"클래스가있는 div 안에 배치 할 수 있습니다. 이 비디오 클래스는 웹 사이트의 유동적 요소가 될 것이므로 그 자체로는 직접적인 높이 제한이 없지만 브라우저의 크기를 조정하면 웹 사이트의 흐름에 따라 너비가 변경됩니다. 이것은 비디오의 특정 종횡비를 유지하면서 임베디드 비디오를 가져 오려는 요소 일 것입니다.
이를 위해 "video"클래스 div에 포함 된 개체 앞에 이미지를 넣습니다.
!!! 중요한 부분은 이미지가 유지하려는 올바른 종횡비를 가지고 있다는 것입니다. 또한 이미지의 크기는 레이아웃을 기반으로 할 비디오 (또는 AR을 유지하는 모든 것)가 예상하는 가장 작은 크기 이상이어야합니다. 이렇게하면 비율 크기가 조정될 때 이미지 해상도의 잠재적 인 문제를 방지 할 수 있습니다. 예를 들어 가로 세로 비율을 3 : 2로 유지하려면 3px x 2px 이미지를 사용하지 마십시오. 어떤 상황에서는 작동 할 수 있지만 테스트하지 않았으므로 피하는 것이 좋습니다.
웹 사이트의 유동적 요소에 대해 정의 된 이와 같은 최소 너비가 이미있을 것입니다. 그렇지 않은 경우 브라우저 창이 너무 작아 질 때 요소가 잘 리거나 겹치는 것을 방지하기 위해 그렇게하는 것이 좋습니다. 어느 시점에서 스크롤바가있는 것이 좋습니다. 웹 페이지가 가져야하는 가장 작은 너비는 약 600px (고정 너비 열 포함)입니다. 전화 친화적 인 사이트를 다루지 않는 한 화면 해상도가 더 작아지지 않기 때문입니다. !!!
나는 완전히 투명한 png를 사용하지만 제대로한다면 그것이 중요하지 않다고 생각합니다. 이렇게 :
<div class="video">
<img class="maintainaspectratio" src="maintainaspectratio.png" />
<object>
<param ... /><param ... />...
<embed src="..." ...</embed>
</object>
</div>
이제 다음과 유사한 CSS를 추가 할 수 있습니다.
div.video { ...; position: relative; }
div.video img.maintainaspectratio { width: 100%; }
div.video object { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
div.video embed {width: 100%; height: 100%; }
또한 객체 내에서 명시적인 높이 또는 너비 선언을 제거하고 일반적으로 복사 / 붙여 넣기 된 소스 코드와 함께 제공되는 태그를 삽입해야합니다.
작동 방식은 비디오 클래스 요소의 위치 속성과 특정 종횡비를 유지하려는 항목에 따라 다릅니다. 요소에서 크기를 조정할 때 이미지가 적절한 종횡비를 유지하는 방식을 활용합니다. 비디오 클래스 요소에있는 다른 요소가 이미지에 의해 조정되는 비디오 클래스 요소의 너비 / 높이를 100 %로 강제하여 동적 이미지가 제공하는 공간을 최대한 활용하도록 지시합니다.
꽤 멋지죠?
자신의 디자인과 함께 작동하려면 약간 놀아야 할 수도 있지만 실제로는 놀랍게도 잘 작동합니다. 일반적인 개념이 있습니다.
Elliot이이 솔루션에 영감을주었습니다.
aspectratio.png 선호하는 종횡비의 크기, 제 경우에는 30x10 픽셀의 완전히 투명한 PNG 파일입니다.
HTML
<div class="eyecatcher">
<img src="/img/aspectratio.png"/>
</div>
CSS3
.eyecatcher img {
width: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url(../img/autoresized-picture.jpg);
}
참고 : background-size 은 대상 브라우저에서 작동하지 않을 수있는 css3 기능입니다. 상호 운용성을 확인할 수 있습니다 ( caniuse.com에서 fe ).
Web_Designer의 답변에 추가하려면 요소<div> 가 포함 된 너비의 75 % 높이 (전체적으로 하단 패딩 으로 구성됨)를가 집니다 . 다음은 좋은 요약입니다. http://mattsnider.com/css-using-percent-for-margin-and-padding/ . 나는 이것이 왜 그렇게되어야하는지 잘 모르겠지만 그것이 방법이다.
div가 100 %가 아닌 너비가되도록하려면 너비를 설정할 또 다른 래핑 div가 필요합니다.
div.ar-outer{
width: 60%; /* container; whatever width you want */
margin: 0 auto; /* centered if you like */
}
div.ar {
width:100%; /* 100% of width of container */
padding-bottom: 75%; /* 75% of width of container */
position:relative;
}
div.ar-inner {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
최근 Elliot의 이미지 트릭과 비슷한 것을 사용하여 CSS 미디어 쿼리를 사용하여 장치 해상도에 따라 다른 로고 파일을 제공 할 수 있었지만 <img>자연스럽게 비례하여 확장 할 수있었습니다 (로고를 배경 이미지로 투명한 .png로 설정했습니다). 올바른 종횡비). 그러나 Web_Designer의 솔루션은 http 요청을 저장합니다.
w3schools.com 에 여기에 언급되어 있고이 수락 된 답변 에서 다소 반복하여 패딩 값을 백분율로 표시합니다 (강조 표시).
포함하는 요소 너비의 백분율로 패딩을 지정합니다.
16 : 9 종횡비를 유지하는 반응 형 DIV의 올바른 예는 다음과 같습니다.
CSS
.parent {
position: relative;
width: 100%;
}
.child {
position: relative;
padding-bottom: calc(100% * 9 / 16);
}
.child > div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
HTML
<div class="parent">
<div class="child">
<div>Aspect is kept when resizing</div>
</div>
</div>
귀하의 솔루션을 기반으로 몇 가지 트릭을 만들었습니다.
당신이 그것을 사용할 때, 당신의 HTML은
<div data-keep-ratio="75%">
<div>Main content</div>
</div>
이 방법으로 사용하려면 : CSS :
*[data-keep-ratio] {
display: block;
width: 100%;
position: relative;
}
*[data-keep-ratio] > * {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
및 js (jQuery)
$('*[data-keep-ratio]').each(function(){
var ratio = $(this).data('keep-ratio');
$(this).css('padding-bottom', ratio);
});
그리고 이것을 가지고 attr data-keep-ratio을 높이 / 너비로 설정하면 그게 다입니다.
@ web-tiki가 이미 vh/ 를 사용하는 방법을 보여 주었기 vw때문에 화면 중앙에 위치 할 방법도 필요합니다. 여기에 9:16 초상화에 대한 스 니펫 코드가 있습니다.
.container {
width: 100vw;
height: calc(100vw * 16 / 9);
transform: translateY(calc((100vw * 16 / 9 - 100vh) / -2));
}
translateY화면에서이 중심을 유지합니다. calc(100vw * 16 / 9)9/16의 예상 높이입니다. (100vw * 16 / 9 - 100vh)오버플로 높이이므로 풀업 overflow height/2하면 화면 중앙에 유지됩니다.
풍경의 경우 16 : 9를 유지하고 사용을 보여줍니다.
.container {
width: 100vw;
height: calc(100vw * 9 / 16);
transform: translateY(calc((100vw * 9 / 16 - 100vh) / -2));
}
비율 9/16 변경 용이성, 미리 정의 할 필요 100:56.25또는 100:75처음 높이를 확보 할 .If, 당신은 예를 들어, 폭과 높이를 전환해서는 안 height:100vh;width: calc(100vh * 9 / 16)9시 16분 초상화.
다른 화면 크기에 맞게 조정하려면 관심을 가질 수도 있습니다.
- 배경 크기 표지 / 포함
- 위의 스타일은 포함과 유사하며 너비 : 높이 비율에 따라 다릅니다.
- 개체 맞춤
- 표지 / 이미지 / 동영상 태그 포함
@media (orientation: portrait)/@media (orientation: landscape)- 비율을 변경하기 위해
portrait/landscape에 대한 미디어 쿼리 .
- 비율을 변경하기 위해
svg를 사용할 수 있습니다. 컨테이너 / 래퍼 위치를 상대적으로 만들고 svg를 먼저 정적으로 배치 한 다음 절대 위치에있는 콘텐츠를 넣습니다 (위 : 0, 왼쪽 : 0, 오른쪽 : 0, 아래 : 0;).
16 : 9 비율의 예 :
image.svg : (src에 인라인 될 수 있음)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9" width="16" height="9"/>
CSS :
.container {
position: relative;
}
.content {
position: absolute;
top:0; left:0; right:0; bottom:0;
}
HTML :
<div class="container">
<img style="width: 100%" src="image.svg" />
<div class="content"></div>
</div>
인라인 svg가 작동하지 않는 것 같지만 다음과 같이 svg를 urlencode하고 img src 속성에 포함 할 수 있습니다.
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%209%22%20width%3D%2216%22%20height%3D%229%22%2F%3E" style="width: 100%;" />
이것은 허용되는 답변에 대한 개선 사항입니다.
- 래퍼 div 대신 유사 요소를 사용합니다.
- 종횡비는 부모 대신 상자의 너비를 기반으로합니다.
- 콘텐츠가 커지면 상자가 세로로 늘어납니다.
.box {
margin-top: 1em;
margin-bottom: 1em;
background-color: #CCC;
}
.fixed-ar::before {
content: "";
float: left;
width: 1px;
margin-left: -1px;
}
.fixed-ar::after {
content: "";
display: table;
clear: both;
}
.fixed-ar-16-9::before {
padding-top: 56.25%;
}
.fixed-ar-3-2::before {
padding-top: 66.66%;
}
.fixed-ar-4-3::before {
padding-top: 75%;
}
.fixed-ar-1-1::before {
padding-top: 100%;
}
.width-50 {
display: inline-block;
width: 50%;
}
.width-20 {
display: inline-block;
width: 20%;
}<div class="box fixed-ar fixed-ar-16-9">16:9 full width</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-3-2 width-20">3:2</div>
<div class="box fixed-ar fixed-ar-4-3 width-20">4:3</div>
<div class="box fixed-ar fixed-ar-1-1 width-20">1:1</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>제 경우에는 SCSS가 최고의 솔루션입니다. 데이터 속성 사용 :
[data-aspect-ratio] {
display: block;
max-width: 100%;
position: relative;
&:before {
content: '';
display: block;
}
> * {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
}
[data-aspect-ratio="3:1"]:before {
padding-top: 33.33%;
}
[data-aspect-ratio="2:1"]:before {
padding-top: 50%;
}
[data-aspect-ratio="16:9"]:before {
padding-top: 56.25%;
}
[data-aspect-ratio="3:2"]:before {
padding-top: 66.66%;
}
[data-aspect-ratio="4:3"]:before {
padding-top: 75%;
}
[data-aspect-ratio="1:1"]:before {
padding-top: 100%;
}
[data-aspect-ratio="3:4"]:before {
padding-top: 133.33%;
}
[data-aspect-ratio="2:3"]:before {
padding-top: 150%;
}
[data-aspect-ratio="9:16"]:before {
padding-top: 177.77%;
}
[data-aspect-ratio="1:2"]:before {
padding-top: 200%;
}
[data-aspect-ratio="1:3"]:before {
padding-top: 300%;
}
예 :
<div data-aspect-ratio="16:9"><iframe ...></iframe></div>
아이디어 나 해킹 일뿐입니다.
div {
background-color: blue;
width: 10%;
transition: background-color 0.5s, width 0.5s;
font-size: 0;
}
div:hover {
width: 20%;
background-color: red;
}
img {
width: 100%;
height: auto;
visibility: hidden;
}<div>
<!-- use an image with target aspect ratio. sample is a square -->
<img src="http://i.imgur.com/9OPnZNk.png" />
</div>2 개 div가 있고 외부 div는 컨테이너이고 내부는 비율을 유지하는 데 필요한 요소 (img 또는 youtube iframe 등)가 될 수 있습니다.
html은 다음과 같습니다.
<div class='container'>
<div class='element'>
</div><!-- end of element -->
"요소"의 비율을 유지해야한다고 가정 해 보겠습니다.
비율 => 4 : 1 또는 2 : 1 ...
CSS는 다음과 같습니다.
.container{
position: relative;
height: 0
padding-bottom : 75% /* for 4 to 3 ratio */ 25% /* for 4 to 1 ratio ..*/
}
.element{
width : 100%;
height: 100%;
position: absolute;
top : 0 ;
bottom : 0 ;
background : red; /* just for illustration */
}
패딩을 %로 지정하면 높이가 아닌 너비를 기준으로 계산됩니다. .. 그래서 기본적으로 그것은 당신의 너비에 상관없이 높이가 항상 그것을 기반으로 계산됩니다. 비율을 유지할 것입니다.
대부분의 답변은 매우 멋지지만 대부분은 이미 올바른 크기의 이미지가 있어야합니다 ... 다른 솔루션은 너비에 대해서만 작동하고 사용 가능한 높이는 신경 쓰지 않지만 때로는 콘텐츠를 특정 높이에 맞추고 싶을 때도 있습니다. .
나는 그것들을 결합하여 완전히 이식 가능하고 크기를 조정할 수있는 솔루션을 가져 왔습니다 ... 트릭은 이미지의 자동 크기 조정에 사용하지만 미리 렌더링 된 이미지 나 다른 형식을 사용하는 대신 인라인 svg 요소를 사용하는 것입니다. 두 번째 HTTP 요청 ...
div.holder{
background-color:red;
display:inline-block;
height:100px;
width:400px;
}
svg, img{
background-color:blue;
display:block;
height:auto;
width:auto;
max-width:100%;
max-height:100%;
}
.content_sizer{
position:relative;
display:inline-block;
height:100%;
}
.content{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background-color:rgba(155,255,0,0.5);
}<div class="holder">
<div class="content_sizer">
<svg width=10000 height=5000 />
<div class="content">
</div>
</div>
</div>SVG의 너비 및 높이 속성에 큰 값을 사용했습니다. 축소 만 가능하므로 최대 예상 크기보다 커야합니다. 이 예에서는 div의 비율을 10 : 5로 만듭니다.
세로 또는 가로보기에서 뷰포트 내부에 정사각형을 맞추려면 (최대한 크지 만 바깥쪽에 튀어 나오지 않음) vw/ vhon orientation portrait/ 사용간에 전환하십시오 landscape.
@media (orientation:portrait ) {
.square {
width :100vw;
height:100vw;
}
}
@media (orientation:landscape) {
.square {
width :100vh;
height:100vh;
}
}
및 을 사용 하는 스마트 솔루션 을 우연히 발견했습니다 .<svg>display:grid
그리드 요소를 사용하면 높이를 설정하는 요소를 지정할 필요없이 두 개 이상의 요소로 동일한 공간을 차지할 수 있습니다. 즉, 상자 에서 키가 클수록 비율이 설정 됩니다.
즉, 콘텐츠가 전체 "비율"을 채울만큼 충분히 크지 않고 콘텐츠를이 공간에 배치하는 방법을 찾고있을 때 그대로 사용할 수 있습니다 (예 : 양방향 사용 display:flex; align-items:center; justify-content:center).
그것은 꽤 많이 투명을 사용하는 것과 동일합니다 <img>으로 display:block(가)를 제외하고, 소정의 비율로 <svg>가볍고 수정하는 것이 훨씬 더 쉽다 (당신이 필요합니다, 이에 응답 비율을 변경).
<div class="ratio">
<svg viewBox="0 0 1 1"></svg>
<div>
I'm square
</div>
</div>
.ratio {
display: grid;
}
.ratio > * {
grid-area: 1/1/1/1;
}
<svg>s 비율을 변경하기 만하면됩니다.
<svg viewBox="0 0 4 3"></svg><svg viewBox="0 0 16 9"></svg>
작동하는지 확인하십시오.
.ratio {
display: grid;
}
.ratio > * {
grid-area: 1/1/1/1;
}
/* below code NOT needed for setting the ratio
* I just wanted to mark it visually
* and center contents
*/
.ratio div {
border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;
}<div class="ratio">
<svg viewBox="0 0 7 1"></svg>
<div>
Fixed ratio 7:1
</div>
</div>콘텐츠 요소가 더 클 때 비율을 설정할 수없는 솔루션이 필요한 경우 (오버플로 숨김 또는 자동 포함) position:relative그리드와 position:absolute; height:100%; overflow-y: auto;콘텐츠에 설정해야 합니다. 예:
.ratio {
display: grid;
position: relative;
}
.ratio > * {
grid-area: 1/1/1/1;
}
.ratio > div {
height: 100%;
overflow-y: auto;
position: absolute;
/* the rest is not needed */
border: 1px solid red;
padding: 0 1rem;
}<div class="ratio">
<svg viewBox="0 0 7 1"></svg>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A scelerisque purus semper eget. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. A cras semper auctor neque vitae tempus quam pellentesque nec. Morbi enim nunc faucibus a pellentesque sit amet porttitor. Arcu odio ut sem nulla. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Cras tincidunt lobortis feugiat vivamus at augue eget. Laoreet sit amet cursus sit amet. Amet nulla facilisi morbi tempus iaculis urna id volutpat. Leo in vitae turpis massa sed elementum tempus egestas sed. Egestas integer eget aliquet nibh. Dolor sit amet consectetur adipiscing elit.
<p>Ut aliquam purus sit amet. Eget magna fermentum iaculis eu non diam phasellus vestibulum. Diam in arcu cursus euismod quis viverra nibh. Nullam vehicula ipsum a arcu cursus vitae congue. Vel orci porta non pulvinar neque laoreet suspendisse. At tellus at urna condimentum mattis pellentesque. Tristique senectus et netus et malesuada. Vel pretium lectus quam id leo in. Interdum velit euismod in pellentesque. Velit euismod in pellentesque massa placerat duis. Vitae suscipit tellus mauris a diam maecenas sed enim.
<p>Mauris a diam maecenas sed enim ut sem. In hendrerit gravida rutrum quisque. Amet dictum sit amet justo donec enim diam. Diam vulputate ut pharetra sit amet aliquam id. Urna porttitor rhoncus dolor purus non enim praesent. Purus in massa tempor nec feugiat nisl pretium. Sagittis vitae et leo duis ut. Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Aliquam purus sit amet luctus venenatis lectus magna. Sit amet purus gravida quis blandit turpis. Enim eu turpis egestas pretium aenean. Consequat mauris nunc congue nisi. Nunc sed id semper risus in hendrerit gravida rutrum. Ante metus dictum at tempor. Blandit massa enim nec dui nunc mattis enim ut.
</div>
</div>img특정 종횡비를 채우는 태그 가있는 솔루션을 공유하고 싶습니다 . backgroundCMS가 지원 되지 않아 사용할 수 없었고 다음과 같은 스타일 태그를 사용하고 싶지 않습니다 <img style="background:url(...)" />. 또한 너비가 100 %이므로 일부 솔루션에서와 같이 고정 크기로 설정할 필요가 없습니다. 반응 형으로 확장됩니다!
.wrapper {
width: 50%;
}
.image-container {
position: relative;
width: 100%;
}
.image-container::before {
content: "";
display: block;
}
.image-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.ratio-4-3::before {
padding-top: 75%;
}
.ratio-3-1::before {
padding-top: calc(100% / 3);
}
.ratio-2-1::before {
padding-top: 50%;
}<div class="wrapper"> <!-- Just to make things a bit smaller -->
<p>
Example of an 4:3 aspect ratio, filled by an image with an 1:1 ratio.
</p>
<div class="image-container ratio-4-3"> <!-- Lets go for a 4:3 aspect ratio -->
<img src="https://placekitten.com/1000/1000/" alt="Kittens!" />
</div>
<p>
Just place other block elements around it; it will work just fine.
</p>
</div>나는이 문제를 꽤 많이 겪었으므로 JS 솔루션을 만들었습니다. 이것은 기본적으로 지정한 비율에 따라 요소의 너비에 따라 domElement의 높이를 조정합니다. 다음과 같이 사용할 수 있습니다.
<div ratio="4x3"></div>
요소의 높이를 설정하고 있으므로 요소는 a display:block또는 이어야합니다 display:inline-block.
https://github.com/JeffreyArts/html-ratio-component
너비 : 100px 및 높이 : 50px (예 : 2 : 1)을 유지한다고 가정 해 보겠습니다.
.pb-2to1 {
padding-bottom: calc(50 / 100 * 100%); // i.e., 2:1
}
플럭스 레이아웃 (FWD)을 사용할 수 있습니다.
https://en.wikipedia.org/wiki/Adaptive_web_design
레이아웃을 조정하고 유지하며 약간 복잡하지만 (RWD)와 같은 콘텐츠를 푸시하지 않고도 페이지 크기를 조정할 수 있습니다.
반응하는 것처럼 보이지만 확장 중입니다. https://www.youtube.com/watch?v=xRcBMLI4jbg
여기에서 CSS 크기 조정 공식을 찾을 수 있습니다.
http://plugnedit.com/pnew/928-2/
새로운 솔루션을 사용했습니다.
.squares{
width: 30vw
height: 30vw
주요 종횡비에
.aspect-ratio
width: 10vw
height: 10vh
그러나 이것은 전체 뷰포트에 상대적입니다. 따라서 뷰포트 너비의 30 % 인 div가 필요한 경우 대신 30vw를 사용할 수 있으며 너비를 알고 있으므로 calc 및 vw 단위를 사용하여 높이에서 재사용합니다.
전체 컨테이너 구조가 백분율 기반 인 경우 이것이 기본 동작입니다.보다 구체적인 예를 제공 할 수 있습니까?
다음은 전체 상위 계층이 % 기반 인 경우 브라우저 창 조정이 추가 js / css없이 작동한다는 의미의 예입니다. 레이아웃에서 이것이 가능하지 않습니까?
<div style="width: 100%;">
<div style="width: 50%; margin: 0 auto;">Content</div>
</div>
참고 URL : https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css
'Development Tip' 카테고리의 다른 글
| 이름이 문자열 일 때 JavaScript 함수를 실행하는 방법 (0) | 2020.09.27 |
|---|---|
| jQuery를 사용하여 div의 innerHTML을 대체하는 방법은 무엇입니까? (0) | 2020.09.27 |
| Ruby에서 attr_accessor는 무엇입니까? (0) | 2020.09.27 |
| Node.js / Windows 오류 : ENOENT, stat 'C : \ Users \ RT \ AppData \ Roaming \ npm' (0) | 2020.09.27 |
| Git에서 삭제 한 분기를 복구 할 수 있습니까? (0) | 2020.09.27 |