Блог

Главная - Вопросы по программированию - Как я могу сделать свой круг отзывчивым только с помощью CSS?

Как я могу сделать свой круг отзывчивым только с помощью CSS?

#css #responsive

#css #отзывчивый

Вопрос:

У меня есть прямоугольник div , который содержит круг с изображением в нем. Мой дизайн адаптивный, и я не могу понять, как сделать мой circle адаптивным. Я читал другие сообщения, в которых упоминается то же самое vw и vh , но у меня это не сработает. Ни один из них не имеет одинаковых width и paddin&-top .

Вот мой codepen

Комментарии:

1. Извините, что вы имеете в виду под «сделать circle адаптивным»?

2. Хороший момент, я сделал предположение: D

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

Ответ №1:

Напишите

<div class="card-premium-cate&ory col"&&t;

вместо

<div class="card-premium-cate&ory col-3"&&t; .

Скрипка.

Комментарии:

1. не могли бы вы объяснить, что col делает different чем col-3 ?

2. Конечно, я мог бы, или вы просто прочитали docs , вы могли бы кое-что узнать там 🙂