宽度：继承/100% 子级

Question

我想在图像顶部放置一个侧边栏，其宽度与图像相同。宽度都不是：继承|100%工作。

CSS

       body {
            display: flex;
        }

        #main-pic {
            width: 40%; 
            height: 700px;
        }

        #main-pic>img {
            width: 100%;
            height: 100%;
        } 

        #logo-holder {
            width: inherit; 
            height: 100px;
            background-color: brown;
            position: absolute;
            top: 50%;
        }

HTML

    <div id="main-pic">
        <img src="myFlower.JPG" alt="My Flower">
        <div id="logo-holder"></div>
    </div>

    <div id="main-text">
        <p>This is the part for text</p>
    </div> 

在这个例子中，我使用 width:inherit，#logo-holder 比图像长一点。我尝试了 width: 100%，它在浏览器中拉伸。有人可以解释并提出解决方案吗？

Answer 1

最简单的解决方案是使用 CSS 中应用的背景图像。

body {
  display: flex;
  margin: 0;
}

#main-pic {
  width: 40%; 
  height: 700px;
  background: url(http://picsum.photos/800/1600);
  display: flex;
  justify-content: center;
  align-items: center;
}

#main-pic>img {
  width: 100px;
  height: 100px;
  border: 3px solid brown;
} 

#main-text {
  padding: 0 1em;
}

<div id="main-pic">
  <img src="http://picsum.photos/200">
</div>

<div id="main-text">
  <p>This is the part for text</p>
</div>