Изменение размера div на контейнер?

У меня есть квадратный блок 100*100px, есть контейнерный блок, который может быть изменен. Я хочу, чтобы изменить размер внутреннего блока, так что всегда находиться внутри родителя без перелива и всегда квадратные (быть изменен динамически)Изменение размера div на контейнер?

Примечание: Я хочу сохранить квадратную форму внутренней div

#child { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: red; 
 
} 
 
#par { 
 
    height: 200px; 
 
    width: 200px; 
 
    border: 2px solid black; 
 
}

<div id="par"> 
 
    <div id="child"> 
 
    </div> 
 
</div>

источник

2016-05-11 Mohamed Elshawaf

Вы имеете в виду без переполнения ребенка или без использования свойства 'overflow'? – TylerH

Ваш вопрос не совсем ясен, не могли бы вы уточнить? – Aziz

Я хочу, чтобы внутренний div был динамически изменен в соответствии с размерами родителя. это означает, что когда его граница касается внутреннего div, внутренний div начинает реагировать на новые измерения. –

Если вы хотите, чтобы элемент был квадратом (соотношение 1: 1), просто добавьте к нему padding-bottom: 100%. Если вы хотите, чтобы этот квадрат имел контент, то внутреннее содержимое этого квадрата должно быть absolutely.

body { width: 200px; } 
 

 
.square { 
 
    padding-bottom: 100%; /* 1:1 aspect ratio (square) */ 
 
    border:1px solid red; 
 
    position: relative; 
 
}

<div class="square"></div>

Вы можете поместить квадрат в контейнере/родителе, но вы не сказали, как перелив должен себя вести?

.parent { 
 
    height: 200px; 
 
    width: 80%; 
 
    border: 1px dashed black; 
 
} 
 

 
.square { 
 
    padding-bottom: 100%; /* 1:1 aspect ratio (square) */ 
 
    border:1px solid red; 
 
    position: relative; 
 
} 
 

 
.square .inner { 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
    width: 100%; 
 
    overflow: auto; 
 
}

<div class="parent"> 
 
    <div class="child square"> 
 
    <div class="inner">responsive square 1:1</div> 
 
    </div> 
 
</div>

jsFiddle: https://jsfiddle.net/azizn/mheoqbnw/

источник

2016-05-11 14:29:19 Aziz

Попробуйте

#par{ 
    width: 200px; 
    height: 200px; 
    border:2px solid black; 
    overflow: hidden; 
} 

#par #child{ 
    position: relative; 
    width: 50%; 
    height: 50%; 
    margin: auto; 
    margin-top: 25%; 
    background-color:red; 
}

http://jsfiddle.net/voj2wsyb/

источник

2016-05-11 13:31:02 WitVault

не поддерживает квадратную форму: ( –

@Mohamed Edited – WitVault

Просто дать #child элемент а max-height и max-width 100%:

#child{ 
    height:100px; 
    max-height:100%; 
    width:100px; 
    max-width:100%; 
}

источник

2016-05-11 13:32:49 Shaggy

Подари ребенку мин, макс и высоту 100% это будет выглядеть его родителя и со 100% это взятие такой же высоты

источник

2016-05-11 13:42:24 jelleB

Здесь вы: -

.child 
 
{ 
 
    height:100px; 
 
    width:100px; 
 
    background-color:red;} 
 
.par 
 
{ 
 
    position: relative; 
 
    height:200px; 
 
    width:200px; 
 
    border:2px solid black; 
 
} 
 
.par:before{ 
 
\t content: ""; 
 
\t display: block; 
 
\t padding-top: 100%; \t /* initial ratio of 1:1*/ 
 
} 
 
.par > .child{ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
}

<html> 
 
    <body> 
 
<div class="par"> 
 
<div class="child"> 
 
</div> 
 
</div> 
 
    </body> 
 
</html>

Если это помогает, отметьте, что проблема решена.

источник

2016-05-11 14:22:50

, что вы хотите это: http://marcj.github.io/css-element-queries/ элемент-запросы, будущее

источник

2016-05-11 16:22:37

Я использую EQCSS, элемент Quer ies, который позволяет мне извлекать значения из JavaScript для использования в моем CSS. Вот демо с% широкой колонке 33, которая имеет площадь, которая будет изменять размер ответно внутри него:

<section> 
    <div></div> 
</section> 
<style> 
    section {width: 33%;} 
    @element 'div' { 
    $this { 
     width: auto; 
     height: eval("clientWidth")px; 
     background: red; 
    } 
    } 
</style> 
<script src=http://elementqueries.com/EQCSS.js></script>

В этом фрагменте width: auto означает, что она расширяется, чтобы заполнить его контейнер. eval('clientWidth') находится внутри запроса элемента, поэтому он ссылается на this.clientWidth, где this - это элемент, соответствующий запросу. Это означает, что высота нашего квадрата всегда будет равна его ширине!(квадрат).

Проверьте это: http://elementqueries.com

Я также использовать эту же технику, чтобы позволить мне изменить размер Youtube и Vimeo плавающих фреймов в соответствии с их соотношением сторон без необходимости обертки:

@element 'iframe' { 
    $this { 
    margin: 0 auto; 
    width: 100%; 
    height: eval("scrollWidth/(width/height)")px; 
    } 
}

Отзывчивого видео масштабирования демо: http://elementqueries.com/demos/video-scaling.html

Надеюсь, это поможет!

источник

2016-05-24 15:06:53 innovati

Изменение размера div на контейнер?

ответ

Смежные вопросы