地狱级难题：width:100%

Question

老师你好，我偶然间遇到了这么一个问题:

<div class="p">
  <div class="c">
    <img src="https://iph.href.lu/500x100?text=500X100&fg=666666&bg=cccccc" alt="">
  </div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.p {
  width: 200px;
}
.c {
  height: 200px;
  display: inline-flex;
}
img {
  width: 100%
}

在线地址

问题看起来很简单：div.p 里面有个div.c , div.c设置为display:inline-flex, 然后div.c里面有图片，此时我们给图片设置为width:100%, 这就陷入了一个两难的境地，因为图片的宽度由div.c决定，而div.c的宽度由它的内容(这里也就是图片来决定)，这就已经绕不出去了.

然后我在Stackoverflow上用散装英语提问了，有个大佬给了我一个类似问题的回答，但是无奈英语水平有限我在那死磕了半天头都大了也不知道是怎么回事.

类似问题的回答

相关中文资料

老师能解释下这个图片的宽度为什么和div.p一样是200px嘛？

PS: 这个场景是这样的，在使用better-scroll来实现轮播的时候，div.p 就是轮播的wrapper, div.c就是轮播的content,因为content的宽度要大于wrapper，所以我一开始想的是，让div.c为display:flex,可是这样div.c和div.p的宽度就一样了，然后我就想干脆把div.c设置为display:inline-flex，这样div.c的宽度就由内容(这里就是图片)来决定了，可是我又希望图片能占满div.c，所以我就写上了width:100%,这样就有了上面的问题，我不明白这个宽度到底是怎么计算出来的?

Answer 1

西门老舅 2022-07-10 07:15:05

你好，

首先，图片的display是inline，但是图片比较特殊，支持width、height设置，所以你可以简单的理解就是图片即具备inline的特性、也具备block的特性，但是它不是inline-block，因为inline-block这个属性诞生前，图片已经存在了，所以一直就是inline。

所以给图片设置width: 100%; 这个它是支持的，那么100%是根据什么来决定大小的呢？是根据父容器的尺寸，但是前提是这个父容器必须是个block，如果不是block的话，那么就继续看父容器的父容器，所以本题中 div.c 是个inline类型的，图片的100%会跟div.p一样。

本题中的 div.c 为inline，所以决定不了图片的尺寸，图片的100%会看div.p这个块的尺寸。