Изменение размера элемента img внутри div без изменения размера div

Question

Я сейчас пытаюсь создать заголовок для сайта. Моя проблема в том, что я пытаюсь масштабировать img внутри моего div, но размер элемента div изменяется вместе с ним.

Это мой заголовок

Я буду sh, чтобы сохранить исходный размер div (зеленая часть), при этом я могу изменить размер моего торта img

Вот мой текущий css для заголовка:

.container-header {
 position:inherit;
 vertical-align: top;
 background: green;
 width: 100%;
 margin-bottom: 300px;

}

.container-header img {
display:run-in;
height: 200px;
}

.container-header a {
display: inline-block;
background: red;
width: 100px;
margin-left: 25px;
margin-right: 25px;
}

.header-logo {
position: relative;
top: 100px;
}

Редактировать: Вот мой html:

<div class="container-header">

<a href="index.html" style="left: 25%"><p>Koti</p></a>
<a href="leipomot.html"><p>Leipomot</p></a>

<img class="header-logo" src="IMG\logo_placeholder.png" alt="" height="30px">

<a href="index.html"><p>Tuotteet</p></a>
<a href="yhteystiedot.html"><p>Yhteystiedot</p></a>

<a href="PHP/shoppingcart.php"><div class="shoppingcart">
<i class="fa fa-shopping-cart"></i>
</div></a>
</div>

Answer 1

Нет display:run-in;. Вы можете использовать display:block и position: absolute на изображении, а также параметры для его положения (верх / низ / влево / вправо, также с использованием процентных значений), возможно, transform (для центрирования) и размер, чтобы разместить его там, где вы хотите, независимо от родительского элемента.