具有图像子项的Flex项目不会从其原始宽度进行调整 [英] Flex item with image child doesn't adjust from its original width

问题描述

我试图创建一个简单的标题，并且遇到了标志图片的问题，因为它占用了比所需空间更多的空间。

  .wrapper {display：flex; flex-direction：row;内容{padding：5px;}  

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

正如您所看到的，内容文本不会放置在徽标附近，因为徽标包装的宽度等于图像在调整大小之前的大小我注意到，如果我设置 height：100％到。 logo 元素的情况会好一点，但是这样做，内容文字重叠了一些图片。

如何修复这是解决这个问题的两种方法：

> 方法＃1–删除额外的包装。使图像本身成为弹性项目。
$ b

.wrapper {显示：flex; flex-direction：row;内容{padding：5px;}

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

方法＃2–定义图像包装的高度。 （不改变HTML）。

.wrapper {显示：flex; flex-direction：row;身高：50px;}。 / * new * / border：1px dashed red;} img {height：100％;}。content {padding：5px; margin-left：5px; border：1px dashed red;}

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

I'm trying to create a simple header and I'm having problems with the logo image because it's taking more space than needed.

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

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

As you can see, the "content" text isn't placed near the logo, because the logo wrapper has a width equal to the size of the image before it gets resized by CSS.

I noticed that if I set height: 100% to the .logo element the situation is a bit better, but doing so, the "content" text overlaps a bit the image.

How can I fix it?

解决方案

Here are two ways to fix the problem:

Method #1 – Remove the extra wrapper. Make the image itself the flex item.

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

Method #2 – Define a height for the image wrapper. (No changes to the 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>

这篇关于具有图像子项的Flex项目不会从其原始宽度进行调整的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！