Как прокладка вычисляется в этой ситуации? Нужно, чтобы длина и ширина были такими же

Я пытаюсь сделать круг с помощью css. Я хочу, чтобы он сохранял соотношение сторон 1: 1, даже когда размер браузера изменяется. Тем не менее, у меня возникают проблемы с тем, чтобы ширина была равна высоте, чтобы достичь этого соотношения 1: 1. Я пробовал много методов от JS до чистого CSS, но ни один из них, похоже, не работает. Моя цель - получить привязки с идентификаторами «circ1» - «circ4», чтобы иметь соотношение сторон 1: 1. В настоящее время я имею ширину в процентах и высоту как произвольное количество пикселей, которое я видел. Я знаю, что я могу сделать 1: 1 отношение с использованием этого Sample Code:Как прокладка вычисляется в этой ситуации? Нужно, чтобы длина и ширина были такими же

div { 
    background:orange; 
    width:20%; 
    padding-top:20%; 
}

Но я также знаю, что обивка на основе контейнера, который является частью, я не могу показаться, чтобы выяснить.

Вот сайт с проблемой. Круги в основном корпусе - это то, что я пытаюсь превратить в «истинные круги», которые также остаются в кругах при изменении размера браузера.

http://www.somil.site90.net

Вот макет моего HTML, который я считаю, является источником проблемы, как якорь вложенных несколько раз, и каждый раз, когда я пытаюсь использовать «отступов» он получает скинул, как я m не уверен, на каком контейнере основывается набивка.

<body> 
    <div id = "main"> 
    <div id = "yolo">Check some stuff out!</div> 
    <div id = 'circles'> 
    <a id = "circ1" href = #> <!--here is the anchor which I want to be 1:1--> 
    <img class = app src = 'applogo.png' width = 80% height = 80%><div id = "taco"> 
    Applocity</div> 
    </a> 
    <a id = "circ2" href = #> 
    <img class = python src = 'pyth.png' width = 85% height = 85%><div id = 'burr'> 
    Pythings</div> 
    </a> 
    <a id = "circ3" href = #> 
    <img class = calc src = 'calculator.png' width = 85% height = 85%><div id = 'churr'> 
    Calculator Programs</div> 
    </a> 
    <a id = "circ4" href = #> 
    <img class = fold src = 'folder.png' width = 80% height = 80%><div id = 'purr'> 
    Miscellaneous</div> 
    </a> 
    </div> 
    </div> 
    </div> 



</body>

Это css для # circ1. Css для других кругов почти идентичен, но можно увидеть в источнике страницы (CTRL + F «circ2/3/4») сайта, указанного выше.

#circ1 { 
    background: #ff8300; 
    height: 175px; //arbitrary value which I want to equal to 15% width converted to pixels 
    width: 15%; 
    border-radius: 50%; 
    position: relative; 
    margin:65px 0px 100px 12%; 
    float: left; 
    -webkit-transition: all 500ms ease-in-out; 
    -moz-transition: all 500ms ease-in-out; 
    -ms-transition: all 500ms ease-in-out; 
    -o-transition: all 500ms ease-in-out; 
    transition: all 500ms ease-in-out; 


}

Заранее спасибо.

источник

2014-07-13 somil

Изменение width:15%; к width:175px; в #circ1

т.е.

#circ1 { 
background: #ff8300; 
height: 175px; 
width:175px; 
border-radius: 50%; 
position: relative; 
margin:65px 0px 100px 12%; 
float: left; 
-webkit-transition: all 500ms ease-in-out; 
-moz-transition: all 500ms ease-in-out; 
-ms-transition: all 500ms ease-in-out; 
-o-transition: all 500ms ease-in-out; 
transition: all 500ms ease-in-out; 


}

источник

2014-07-13 06:32:50 Praveen

он хочет, чтобы они изменили размер. это даст им фиксированный размер. –

нет, он не придавал бы ему фиксированного размера, я старался и работал. – Praveen

Устанавливается ширина 175 пикселей и высота 175 пикселей. Я также пробовал и не менял размер, как и ожидалось ... –

Giving элементы постоянного соотношения сторон на изменение размера немного сложнее. Посмотрите на This JSFiddle.

Вы хотите дать каждому якорю родительский div и предоставить этим родительским divs процент от padding-bottom. Дайте привязкам абсолютное позиционирование и размер их до размера родительских div (top: 0; bottom: 0; left: 0; right: 0;). Обратите внимание, что при изменении размера соотношение сторон остается 1: 1.

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

источник

2014-07-13 07:09:26

Дело в том, что якоря, которые у меня есть, относительно позиционированы и должны быть сохранены таким образом. – somil

Как прокладка вычисляется в этой ситуации? Нужно, чтобы длина и ширина были такими же

ответ

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