Question

我的问题是我有一张图片，我想将其用作网站的徽标。它所在的标题和div的大小合适（通过在chrome上检查它来检查），但img溢出。我该如何缩小它？（我将使用占位符图像代码）这是代码：

<body>
  <header class="mainheader">
     <a href="main.html" class="navelement">
        <div class="imgcontainer">
          <img src="https://lh3.googleusercontent.com/-Ajc8gSO3SRw/VtZj0tsyXhI/AAAAAAAAAHs/tlsdyufJ1J4/w868-h560/2.png"/>
        </div>
    </a>
  </header>
 </body>

这是随附的CSS，我很困惑为什么最大高度不起作用。

* {
  box-sizing: border-box;
}
 body{
   margin: 0;
}
header{
  height:10vh;
  width: 100%;
  float left:
  margin: 0;
  background-color:grey;
  font-family: 'Teko', sans-serif;
  display: inline-block;
}
header .navElement {
  vertical-align: middle;
  float:left;
  width: 17%;
}
.imgcontainer{
  float:left;
  max-height: 100%;
}
.imgcontainer img{
  float:left;
  max-height:100%;
}

我意识到有些事情是不必要的，但是因为我已经尝试了很多东西来解决它，我不知道什么是有效的。感谢您提供任何有用的回复。

Answer 1

为防止内容溢出，您只需使用相应的css-property：overflow: hidden即可。如果你这样做，那么溢出的内容就会被切断。在您的示例中，这不是正确的方法。

您可以使用max-height而不是height。通过这样做，您将为元素分配绝对值。由于您的.imagecontainer只有max-height属性，因此请尝试将其替换为height，如图here所示。

.imgcontainer {
  float: left;
  height: 100%;
}

如何阻止img溢出？

1 个答案: