img得到调整大小但div没有

Question

我有一个大小为最大宽度720px的父div，一个子图像和一个子大小，两者的大小都是最大宽度100％，显示属性设置为块。 div内容为一个非常长的字符串，img是一个非常宽的图像。

当视口小于720px时，图像会正确调整大小。然而，div获取字符串的宽度并忽略任何溢出，直到达到720px。

任何人都可以解释为什么img标签被调整大小到视口，而div不是？

.container {
  max-width: 720px;
  display: inline-block;
}
.container img,
.container .content {
  max-width: 100%;
  display: block;
  overflow: hidden;
}

<div class="container">
  <img src="https://www.swedavia.com/imagevault/publishedmedia/h1i0wnry5er12gtxsmxu/longchamp400.png">
  <div class="content">.........................................................................................................................................</div>
</div>

Answer 1

任何人都可以解释为什么img标签被调整大小到视口，而div不是？

因为坚不可摧的字符串，简单。

要解决这个问题，请将父级display div的.content属性设置为inline，添加word-wrap: break-word以启用包装，并将.container div给width的100%以使其响应：

.container {
  max-width: 720px;
  width: 100%; /* responsiveness */
  display: inline-block;
  overflow: hidden;
}

.container img {
  max-width: 100%;
  display: block;
}

/* solution */
.container .content {
  display: inline;
  word-wrap: break-word;
}

<div class="container">
  <img src="https://www.swedavia.com/imagevault/publishedmedia/h1i0wnry5er12gtxsmxu/longchamp400.png">
  <div class="content">........................................................................................................................................................................................</div>
</div>