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

Question

[Andrey Vasilev]

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

До

После

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

Comments

[Rustam Bainazarov]

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

Где код?

[Andrey Vasilev]

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

<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]

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

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

[Andrey Vasilev]

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

Answer 1

[Andrey Vasilev]

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