Question

我试图创建一个简单的标题，但我对徽标图片有问题，因为它占用的空间超出了所需的空间。

＆＃13;

.wrapper {
  display: flex;
  flex-direction: row;
  height: 50px;
}
.logo {
  padding: 5px;
}
img {
  height: 100%;
}
.content {
  padding: 5px;
}

＆＃13;

<div class="wrapper">
  <div class="logo"><img src="http://placehold.it/350x150"/></div>
  <div class="content">content</div>
</div>

＆＃13;

正如您所看到的，＆＃34;内容＆＃34;文本没有放置在徽标附近，因为徽标包装器的宽度等于之前的图像大小它会被CSS调整大小。

我注意到，如果我将height: 100%设置为.logo元素，情况会更好一些，但这样做，内容＆＃34;文字与图像重叠一点。

我该如何解决？

Answer 1

以下是解决问题的两种方法：

方法＃1 - 删除额外的包装器。使图像本身成为弹性项目。

.wrapper {
  display: flex;
  flex-direction: row;
  height: 50px;
}
img {
  height: 100%;
}
.content {
  padding: 5px;
}

<div class="wrapper">
  <img src="http://placehold.it/350x150"/><!-- div wrapper removed -->
  <div class="content">content</div>
</div>

方法＃2 - 定义图像包装的高度。（没有对HTML进行任何更改。）

.wrapper {
  display: flex;
  flex-direction: row;
  height: 50px;
}

.logo {
  height: 100%; /* new */
  border: 1px dashed red;
}

img {
  height: 100%;
}

.content {
  padding: 5px;
  margin-left: 5px;
  border: 1px dashed red;
}

<div class="wrapper">
  <div class="logo"><img src="http://placehold.it/350x150" /></div>
  <div class="content">content</div>
</div>

Answer 2

您必须以像素为单位明确设置图像高度。 height: 100%将使用图像原始高度，而不是其容器高度。

我将justify-content和align-items添加到Flex容器中，以便正确定位。

＆＃13;

.wrapper {
  display: flex;
  flex-direction: row;
  height: 50px;
  justify-content: flex-start;
  align-items: flex-start;
}
.logo {
  padding: 5px;
}
img {
  max-height: 50px
}
.content {
  padding: 5px;
}

＆＃13;

<div class="wrapper">
  <div class="logo"><img src="http://placehold.it/350x150"/></div>
  <div class="content">content</div>
</div>

＆＃13;

带有图像子项的Flex项目不会从其原始宽度进行调整

2 个答案: