Как сделать адаптивный круг с помощью таблицы?

Question

[Apple_ins]

.info table {
	border: 1px solid orange;
    width: 300px;
	height: 300px;
    -moz-border-radius: 50px;
	-webkit-border-radius:50px;
	border-radius:1000px;
	margin: auto;
	
}
.info td {
	padding: 10px;
    text-align: center;
	color:#4d4d4d;
	border-radius:1000px;
	background-color:#fff;
	
}

<table id="table_r">
	
	<tr> 
	<td><h2 style="font-size:25px; margin-bottom:0px;">Кол-во участников</h2><br><p style="font-size:30px; margin-top:0px;">0</p></td> 
	</tr>
	
	</table>

Нужно сделать код адаптивным, а то при маленьком размере экрана круг превращается в овал. Заранее благодарен)

Answer 1

[Anton fon Faust]

можно использовать, например, в качестве единиц измерения vw, а не пиксели.

Comments

[Apple_ins]

И смысл?

[Anton fon Faust]

Apple_ins: Уменьшение контента пропорционально ширине и/или диагонали экрана.
Или нормально сформулируйте задачу.

[Apple_ins]

Anton fon Faust: у меня есть круг, но при маленьком размере экрана круг превращается в овал. И мне нужно, чтобы этот круг становился меньше, тоесть адаптировался под экран.

[Anton fon Faust]

Apple_ins: Я сходу могу назвать минимум три варианта, почему круг может превратиться в овал на маленьком разрешении (разрешение имеет как минимум две характеристики - высоту и ширину):
1) Круг сжимается по ширине (указать минимальную ширину).
2) Круг сжимается по высоте (указать минимальную высоту).
3) Контент сжимается по ширине и начинает растягиваться по высоте (указать минимальную ширину, overflow: hidden)

Сделайте на jsfiddle пример - посмотрим предметно.

[Apple_ins]

Anton fon Faust: https://jsfiddle.net/0n9560dw/

[Anton fon Faust]

Apple_ins: Странно, конечно, но у меня не превращается в овал на маленьких разрешениях. В каком браузере (и версии) происходит?

[Apple_ins]

Anton fon Faust: internet explorer 11