종횡비를 유지하면서 div 크기를 반응 적으로 변경
이 질문에는 이미 답변이 있습니다.
- CSS 22 답변으로 div의 가로 세로 비율 유지
이미지에 너비 또는 높이를 백분율로 지정하면 가로 세로 비율을 유지하면서 이미지가 커지거나 줄어들지 만 다른 요소와 동일한 효과를 원한다면 너비와 높이를 백분율로 묶을 수 있습니까?
순수한 CSS를 사용하여이 작업을 수행 할 수 있습니다. 자바 스크립트가 필요하지 않습니다. 이것은 padding-top백분율이 포함하는 블록의 width에 상대적 이라는 (어떤 반 직관적 인) 사실을 활용합니다 . 예를 들면 다음과 같습니다.
.wrapper {
width: 50%;
/* whatever width you want */
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 56.25%;
/* 16:9 ratio */
display: block;
content: '';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
/* fill parent */
background-color: deepskyblue;
/* let's see it! */
color: white;
}<div class="wrapper">
<div class="main">
This is your div with the specified aspect ratio.
</div>
</div>Chris의 생각과 달리, 또 다른 옵션은 의사 요소를 사용하는 것이므로 절대적으로 배치 된 내부 요소를 사용할 필요가 없습니다.
<style>
.square {
/* width within the parent.
can be any percentage. */
width: 100%;
}
.square:before {
content: "";
float: left;
/* essentially the aspect ratio. 100% means the
div will remain 100% as tall as it is wide, or
square in other words. */
padding-bottom: 100%;
}
/* this is a clearfix. you can use whatever
clearfix you usually use, add
overflow:hidden to the parent element,
or simply float the parent container. */
.square:after {
content: "";
display: table;
clear: both;
}
</style>
<div class="square">
<h1>Square</h1>
<p>This div will maintain its aspect ratio.</p>
</div>
여기에 데모가 있습니다 : http://codepen.io/tcmulder/pen/iqnDr
편집하다:
이제 Isaac의 아이디어를 요약하면 현대 브라우저에서는 vw 단위를 사용하여 가로 세로 비율을 강제하는 것이 더 쉽습니다 (vh를 사용하지 않아도되지만 가로 세로 비율은 창 높이에 따라 변경됩니다).
따라서 다음과 같이 단순화됩니다.
<style>
.square {
/* width within the parent (could use vw instead of course) */
width: 50%;
/* set aspect ratio */
height: 50vw;
}
</style>
<div class="square">
<h1>Square</h1>
<p>This div will maintain its aspect ratio.</p>
</div>
https://codepen.io/tcmulder/pen/MdojRG?editors=1100 에서 수정 된 데모를 작성했습니다.
컨테이너가 아닌 브라우저의 너비를 기반으로하기 때문에 브라우저의 너비를 기반으로하기 때문에 엄청나게 크게 또는 작게 커지는 것을 원하지 않으면 최대 높이, 최대 너비 및 / 또는 최소 높이, 최소 너비를 설정할 수도 있습니다 무기한으로 성장 / 수축하십시오.
글꼴 크기를 vw 측정으로 설정하고 모든 내장을 em 측정으로 설정하면 요소 내부의 내용을 조정할 수 있습니다. https://codepen.io/tcmulder/pen/VBJqLV?editors = 1100
<style>
#aspectRatio
{
position:fixed;
left:0px;
top:0px;
width:60vw;
height:40vw;
border:1px solid;
font-size:10vw;
}
</style>
<body>
<div id="aspectRatio">Aspect Ratio?</div>
</body>
여기서 주목해야 할 것은 vw= 뷰포트 너비와 vh= 뷰포트 높이
그게 내 해결책이야
<div class="main" style="width: 100%;">
<div class="container">
<div class="sizing"></div>
<div class="content"></div>
</div>
</div>
.main {
width: 100%;
}
.container {
width: 30%;
float: right;
position: relative;
}
.sizing {
width: 100%;
padding-bottom: 50%;
visibility: hidden;
}
.content {
width: 100%;
height: 100%;
background-color: red;
position: absolute;
margin-top: -50%;
}
(function( $ ) {
$.fn.keepRatio = function(which) {
var $this = $(this);
var w = $this.width();
var h = $this.height();
var ratio = w/h;
$(window).resize(function() {
switch(which) {
case 'width':
var nh = $this.width() / ratio;
$this.css('height', nh + 'px');
break;
case 'height':
var nw = $this.height() * ratio;
$this.css('width', nw + 'px');
break;
}
});
}
})( jQuery );
$(document).ready(function(){
$('#foo').keepRatio('width');
});
실례 : http://jsfiddle.net/QtftX/1/
참고 URL : https://stackoverflow.com/questions/12121090/responsively-change-div-size-keeping-aspect-ratio
'IT story' 카테고리의 다른 글
| Java에서 문자열 배열을 문자열로 변환 (0) | 2020.04.26 |
|---|---|
| 레일스 원시 SQL 예제 (0) | 2020.04.26 |
| 서로 옆에 CSS 두 div (0) | 2020.04.26 |
| HttpClient의 HttpRequestMessage에서 쿠키를 설정하는 방법 (0) | 2020.04.26 |
| sqlalchemy 행 객체를 python dict로 변환 (0) | 2020.04.26 |