时间戳

首页 > 解决方案 > 为什么我的子 div 没有从父 div 继承其宽度？

html - 为什么我的子 div 没有从父 div 继承其宽度？

问题描述

这应该非常简单。但是孩子不会继承宽度！溢出：隐藏的作品，但随后图像被严重裁剪。当我尝试 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>

标签： htmlcss

解决方案

你必须提供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>

推荐阅读