Question

我有一个简单的布局，并试图将图像保持在div内，但它在全宽模式下走出div，有没有办法调整图像以保持在div内，我可以处理使用背景图像但我认为必须有一种方法可以使用图像标记保存在div中

＆＃13;

header {
float: left;
width: 100%;
height: 100px;
background: #f00;
box-sizing: border-box;
padding: 10px 0;
}
header .header_left {
float: left;
width: 20%;
}
header .header_left > a > img {
width: 100%;
height: auto;
}
header .header_right {
float: right;
width: 20%;
}

＆＃13;

<header>
  <div class="mcontainer">
    <div class="header_left"> <a href="javascript:;"><img src="https://cdn.img42.com/63de8c9048f1b98a226f926f5d9d56c5.jpeg" alt="Welcome"></a> </div>
    <div class="header_right">
      <ul>
        <li>Test/Test</li>
        <li>Login</li>
      </ul>
    </div>
  </div>
</header>

＆＃13;

Answer 1

您的标题的固定高度为100px，顶部和底部填充为10px。因此，您的内容的高度为80px，因此只需将max-height:80px;添加到您的图片中即可：

代码（https://jsfiddle.net/y1hnyc3d/1/）：

header {
  float: left;
  width: 100%;
  height: 100px;
  background: #f00;
  box-sizing: border-box;
  padding: 10px 0;
}
header .header_left {
  float: left;
  width: 20%;
}
header .header_left > a > img {
  width: 100%;
  height: auto;
  max-height:80px;
}
header .header_right {
  float: right;
  width: 20%;
}

<header>
  <div class="mcontainer">
    <div class="header_left"> <a href="javascript:;"><img src="https://cdn.img42.com/63de8c9048f1b98a226f926f5d9d56c5.jpeg" alt="Welcome"></a> </div>
    <div class="header_right">
      <ul>
        <li>Test/Test</li>
        <li>Login</li>
      </ul>
    </div>
  </div>
</header>

将图像保存在div容器中

1 个答案: