自动调整父div的大小

Question

我想把一个调整了大小的子图像放在父div中。如何让这个父div与子图像相同，而不是更大？有关示例，请参阅下面的snipppet。感谢。

Beautiful Soup

div {
  border: 1px solid blue;
  width: auto;
  height: auto;
  display: inline-block;
  overflow: auto;
}

img {
  background-color: orange;
  width: 80%;
  height: 80%;
  overflow: auto;
}

Answer 1

在这种情况下，您需要width的{​​{1}}为img，并且100%或width的某些内容：

＆＃13;

＆＃13;

80%

＆＃13;

div {
  border: 1px solid blue;
  width: auto;
  height: auto;
  display: inline-block;
  overflow: auto;
}

img {
  background-color: orange;
  display: block;
}

＆＃13;

＆＃13;

＆＃13;

预览

Answer 2

你使用img大小的百分比的事实是问题。你说你的图像必须是父div的80％，因此你明确地告诉img不要填充整个div。 您遇到的另一个问题是图像是内联元素，如果您将其更改为阻止它将删除图像底部的额外空间。

参见CSS

div {
  border: 1px solid blue;
  display: inline-block;
}

img {
  background-color: orange;
  display: block;
  width: 90px;
  height: 90px;
}

也是Pen

我希望它有所帮助！