Мне нужно настроить изображение на панель навигации, но я не могу изменить размер или "переместить" изображение. Что случилось? (Изображение должно быть в центре, а его размер должен соответствовать ширине панели навигации)

.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>
0
Munksgaard 29 Сен 2016 в 11:39

3 ответа

Лучший ответ

Здесь нет кода, фактически ссылающегося на изображение.

Ниже будет сделано это.

.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>
1
JamesPark.ninja 29 Сен 2016 в 08:44

Привет, просто добавьте этот дополнительный CSS в свой стиль

  .forsidebillede img{
   width:100%;
   height:100%;
   }
0
Asifuzzaman Redoy 29 Сен 2016 в 08:46

Не уверен, что вы имеете в виду под изменением размера в соответствии с навигационной панелью. Но центрирование может быть простым.

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

Я полностью догадываюсь, но вы пытаетесь изменить размер изображения, чтобы он соответствовал его контейнеру? Нравится?

.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>
0
DreamTeK 29 Сен 2016 в 08:51