Munksgaard Munksgaard - 2 months ago 11
CSS Question

Adjusting an image

I need to adjust my image to a nav bar, but i can't seem to resize or "move" the picture. What is wrong? (The image need to be in center, and be resized to fit the nav bar width)



.forsidebillede {
width: 1000px;
height: 100px;
display: block;
margin-left: auto;
margin-right: auto
}

<section class="forsidebillede">
<img src="https://a2ua.com/grey/grey-002.jpg" alt="smoothies"/>
</section>




Answer

There's no code here actually referencing the image.

The below would do this.

.forsidebillede {
width: 1000px;
height: 100px;
display: block;
    margin-left: auto;
    margin-right: auto
}

.forsidebillede > img {
    width:100%;
    height:100%; /* Only if you want the height to be filled also */
    display:block; /* To remove any extra spacing */
}
<section class="forsidebillede">
<img src="smoothie.jpg" alt="smoothies"/>
</section>

Comments