Question

我需要将我的图像调整到导航栏，但我似乎无法调整大小或移动＆＃34;图片。怎么了？（图像需要位于中心，并调整大小以适应导航栏宽度）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

这里没有代码实际引用图像。

以下会这样做。

＆＃13;

.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 */
}

＆＃13;

<section class="forsidebillede">
<img src="smoothie.jpg" alt="smoothies"/>
</section>

＆＃13;

Answer 2

通过调整大小以适应导航栏，不确定您的意思。但是居中可以很简单。

＆＃13;

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

＆＃13;

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

＆＃13;

我完全在猜测，但你是否想要调整图像大小以适合其容器？喜欢这个？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

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

调整图像

3 个答案: