调整图像

Question

我需要将图片调整为导航栏，但我似乎无法调整图片大小或 "move" 图片。怎么了？（图像需要居中，并调整大小以适合导航栏宽度）

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

不确定调整大小以适应导航栏是什么意思。但是居中可以很简单。

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

Answer 2

此处没有实际引用图像的代码。

下面会这样做。

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

Answer 3

您好，只需在您的风格中添加这个额外的 Css

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

调整图像

Adjusting an image

html

css

image

centering