Adjusting an image

Question

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>

[this](http://stackoverflow.com/questions/39289576/css-image-resize-issue/39289947#39289947) might get you started... — kukkuz, Sep 29 '16 at 08:42

score 1 · Accepted Answer · answered Sep 29 '16 at 08:44

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>

Excellent, no problem! – JamesPark.ninja Oct 05 '16 at 09:43 — JamesPark.ninja, Oct 05 '16 at 09:43

DreamTeK · Answer 2 · 2016-09-29T08:51:48.073

0

Not sure what you mean by resize to fit navbar. But centering can be simple.

.forsidebillede {
  width: 1000px;
  height: 100px;
  display: block;
  margin:0 auto;
  text-align:center;
}

<section class="forsidebillede">
<img src="http://www.jambajuice.com/~/media/www/images/products/product/smoothies/almond-milk-smoothies-promotion/Almond%20Milk%20smoothies%20category%20image.ashx" alt="smoothies"/>
</section>

I am completely guessing but are you truying to resize the image to fits its container? Like this?

.forsidebillede {
  width: 1000px;
  height: 100px;
  display: block;
  margin:0 auto;
  text-align:center;
}
.forsidebillede img{
  height:100%; 
  width:100%;
}

<section class="forsidebillede">
<img src="http://www.jambajuice.com/~/media/www/images/products/product/smoothies/almond-milk-smoothies-promotion/Almond%20Milk%20smoothies%20category%20image.ashx" alt="smoothies"/>
</section>

edited Sep 29 '16 at 08:51

answered Sep 29 '16 at 08:44

DreamTeK

32,537
27
112
171

It's not clear what end result you want. How do you want to resize? – DreamTeK Sep 29 '16 at 08:47
I didn't refer to the "img", thats why i couldn't adjust size. But it's working now! – Munksgaard Sep 29 '16 at 08:53
I did. But had to wait a few minutes to be allowed. – Munksgaard Sep 29 '16 at 08:55
Good luck with your project. :) – DreamTeK Sep 29 '16 at 08:58

score 0 · Answer 3 · answered Sep 29 '16 at 08:46

0

Hello just add this extra Css in your style

  .forsidebillede img{
   width:100%;
   height:100%;
   }

answered Sep 29 '16 at 08:46

Asifuzzaman Redoy

1,773
1
15
30

Adjusting an image

3 Answers3