为什么我的孩子div不从父div继承宽度？

Question

这应该超级简单。但是孩子不会继承宽度！溢出：隐藏有效，但是图像被严重裁剪。当我尝试width：inherit时，它仍然不起作用。为什么我的孩子div不继承其包装的宽度？

.project-image {
  width: 100%;
}

.project-wrapper {
  width: 500px;
  height: 500px;
  background-color: darkolivegreen;
}

p {
  color: white;
}

<div class="project-wrapper">
  <div class="project-image">
    <img src="photo.jpg">
  </div>
  <p> Artist Website </p>
</div>

Answer 1

您必须为图像提供100%，而不是div，因为img是inline元素。

.project-wrapper {
  width: 500px;
  height: 500px;
  background-color: darkolivegreen;
}

.project-image img {
  width: 100%;
}

p {
  color: white;
}

<div class="project-wrapper">
  <div class="project-image">
    <img src="http://placekitten.com/301/301">
  </div>
  <p> Artist Website </p>
</div>

Answer 2

我知道了！我必须选择图像本身，而不是图像包装器。

img{
width:100%
}