Как лучше адаптировать картинку?

Question

Andrey Vasilev @Nolis

it-гопник

Вёрстка

Как лучше адаптировать картинку?

Имеется картинка на сайте (с комплюктером), которая при малейшем сужении экрана начинает заползать на рядом стоящий элемент.
Вопрос следующий: как лучше сделать данное изображение адаптивным.
медиазапросы? Указывать в каких-то определенных ед. измерения? Может что-то другое?

До

После

P.s. Блоки флексовые.

Вопрос задан более трёх лет назад
241 просмотр

4 комментария

Подписаться 2 Простой 4 комментария

Rustam Bainazarov @SmthTo Куратор тега Вёрстка

Проценты, нет?

Где код?

Написано более трёх лет назад

Andrey Vasilev @Nolis Автор вопроса

Рустам Байназаров,

<div class="it-w-color">
<div class="color-ball">
	<h1 class="hl-1-color">Цветной шар</h1>
	<h2 class="hl-2-color">От оформления воздушными шарами,<br>
	до починки вашей техники</h2>
	</div>
	<div class="computer">
		<img src="img/top-content/computer.png" alt="IT-tech">
	</div>
</div>

.it-w-color
	display: flex
	.color-ball
		background: url(../img/top-content/elips.png) no-repeat
		height: 436px
		width: 100%
		margin-left: 180px
		.hl-1-color
			margin-top: 30px
			margin-bottom: 0px
			margin-left: 20px
			padding-top: 70px
			color: #ffffff
			font-family: Furore-100
			font-size: 100px
			text-transform: uppercase
			font-weight: 400
		.hl-2-color
			margin: 0
			margin-left: 25px
			margin-top: 28px
			color: #ffffff
			font-family: "MuseoSansCyrl-100"
			font-size: 40px
			font-weight: 400

.computer
	margin-top: -100px
	margin-right: 37px
	width: 100%
	img
		float: right
		width: 100%

Написано более трёх лет назад

Rustam Bainazarov @SmthTo Куратор тега Вёрстка

Andrey Vasilev, в таком виде не нужно. Сделайте песочницу.

Зачем у .computer есть float, когда он flex-элемент, на котором float не работает?

Написано более трёх лет назад
Andrey Vasilev @Nolis Автор вопроса

Рустам Байназаров, что-то вроде того.

Написано более трёх лет назад

Решения вопроса 1

Комментировать

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

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

HTML

+2 ещё

Средний
Неправильное отображение верстки во всех браузерах локально на компьютере, в чем может быть проблема?
- 1 подписчик
- 12 часов назад
- 61 просмотр
1

ответ
Вёрстка

Простой
В чем может быть проблема, верстка расплывается по экрану телефона?
- 4 подписчика
- вчера
- 2614 просмотров
3

ответа
Вёрстка

Средний
Что использовать для современной автоматизации верстки?
- 1 подписчик
- 15 апр.
- 135 просмотров
2

ответа
Вёрстка

Простой
Можно ли сверстать макет без JavaScript?
- 3 подписчика
- 15 апр.
- 760 просмотров
3

ответа
Вёрстка

Простой
Какой актуальный стек верстки 2024?
- 3 подписчика
- 10 апр.
- 1018 просмотров
3

ответа
Вёрстка

+1 ещё

Средний
Есть ли отслеживание страницы при вёрстке в GULP?
- 1 подписчик
- 10 апр.
- 64 просмотра
1

ответ
HTML

+2 ещё

Простой
Как сделать такой clip-path на задний фон?
- 1 подписчик
- 07 апр.
- 108 просмотров
0

ответов
HTML

+2 ещё

Средний
Как сделать колесо для текста css?
- 1 подписчик
- 04 апр.
- 123 просмотра
0

ответов
HTML

+2 ещё

Простой
Как сделать такой блок с картинкой?
- 1 подписчик
- 04 апр.
- 94 просмотра
0

ответов
Вёрстка

+1 ещё

Средний
Есть ли в Markdown возможность игнорировать перенос строки?
- 1 подписчик
- 02 апр.
- 36 просмотров
1

ответ
Показать ещё Загружается…

Frontend Vue & Capacitor Developer Middle++

Parasol Software

от 2 000 до 2 500 $

Frontend-стажер React

Студия Oxem • Москва

от 20 000 до 80 000 ₽

Frontend программист-разработчик

Максавит • Нижний Новгород

До 200 000 ₽

Написать код на python

19 апр. 2024, в 03:01

1000 руб./за проект

Настройка сервера

18 апр. 2024, в 21:56

2000 руб./за проект

Помощь с водпресс

18 апр. 2024, в 21:00

150 руб./за проект

Рустам Байназаров,
<div class="it-w-color"> <div class="color-ball"> <h1 class="hl-1-color">Цветной шар</h1> <h2 class="hl-2-color">От оформления воздушными шарами,<br> до починки вашей техники</h2> </div> <div class="computer"> <img src="img/top-content/computer.png" alt="IT-tech"> </div> </div>

.it-w-color display: flex .color-ball background: url(../img/top-content/elips.png) no-repeat height: 436px width: 100% margin-left: 180px .hl-1-color margin-top: 30px margin-bottom: 0px margin-left: 20px padding-top: 70px color: #ffffff font-family: Furore-100 font-size: 100px text-transform: uppercase font-weight: 400 .hl-2-color margin: 0 margin-left: 25px margin-top: 28px color: #ffffff font-family: "MuseoSansCyrl-100" font-size: 40px font-weight: 400 .computer margin-top: -100px margin-right: 37px width: 100% img float: right width: 100%
Andrey Vasilev, в таком виде не нужно. Сделайте песочницу.

Зачем у .computer есть float, когда он flex-элемент, на котором float не работает?
Рустам Байназаров, что-то вроде того.

Answer 1 · 2019-07-05 19:42:01

Сделал элипсу и картинке -
background-size: contain
А для текста прописал -
white-space: nowrap
Теперь при уменьшении ширины начинает уменьшаться картинка, а не залезать на элипс.
Спасибо за ответы Рустам Байназаров .

Как лучше адаптировать картинку?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт