динамический круг css внутри div

Question

Привет, я неоднократно искал форум и Google - пробовал все виды разных вещей, но я не могу сделать это ...

Я пытаюсь зашифровать страницу с фиксированным верхним и нижним колонтитулами, центрированная по центру окружность которой динамически меняет размер и не перетекает ни в верхний, ни в нижний колонтитулы.

Пожалуйста, посмотрите на мой пример:

https://jsfiddle.net/p90pq8b3/3/

Я совсем новый, так что все это, но, честно говоря, я немного удивлен, почему

 document.getElementById('circle').style.height = document.getElementById ('circle').style.width;

Кажется, игнорируется.

javascript jquery html css

0

frankBang 16 Дек 2015 в 12:13

Answer 1

Попробуй: css:

#circle{
  position: absolute;
}

Js:

   var w = $('#circle').width();
function f() {
 $('#circle').height($('#circle').width());
  if ($('#circle').height() > $('.wrapper').height()) {
    $('#circle').height($('.wrapper').height());
    $('#circle').width($('.wrapper').height());
  } else if ($('#circle').height() < w) {
    $('#circle').width($('.wrapper').height());

  }
  if ($('#circle').width() > $('.wrapper').width()) {
    $('#circle').width($('.wrapper').width());
  }
  }
f();
$(window).on('resize', function() {
f()
});

https://jsfiddle.net/uyt9z1qp/4/

-1

madalinivascu 16 Дек 2015 в 09:55

Answer 2

Всем привет, спасибо за помощь @madalin ivascu и его решению jquery.

Я немного подправил его, так что теперь мне нужны навигационные стрелки и действительно адаптивное решение. Если кому-то интересно, проверьте это.

https://jsfiddle.net/sd34j5k6/

if($('.wrapper').height() > $('.wrapper').width()) 
{
    $('#circle').width($ ('.wrapper').width() *0.7);
    $('#circle').height($('.wrapper').width() *0.7 );
}else if( $('.wrapper').width()  >  $('.wrapper').height() )
{
    $('#circle').width($('.wrapper').height() *0.9);
    $('#circle').height($('.wrapper').height() *0.9 );
}

0

frankBang 16 Дек 2015 в 15:37

Answer 3

Это не вернет ширину

document.getElementById('circle').style.width

Но это будет (без px)

document.getElementById('circle').offsetWidth

Замените вашу функцию resize этим, и она должна работать

function resize() {
  var circle = document.getElementById('circle');
      w = circle.offsetWidth;

  circle.style.height = w + 'px';
}

Вот пример на JSFIDDLE.

0

Magnus Engdal 16 Дек 2015 в 09:32

Answer 4

Просто для протокола: Вы думали о том, чтобы на самом деле использовать настоящий круг? Вы можете встраивать SVG в html. Расчет фактического размера для позиционирования остается.

<svg height="200" width="200" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g>
    <circle cx="80" cy="80" r="75" stroke="black" stroke-width="1" fill="green" />
    <text x="40" y="80" stroke="black">I am a circle!</text>
  </g>
</svg>

0

lupz 16 Дек 2015 в 09:33

динамический круг css внутри div

4 ответа

Похожие вопросы

Новые вопросы

javascript