Search code examples
htmlcssimagecentering

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>

Solution

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