HTML/CSS 适合内容 Div 除非屏幕很小

Question

如何设置 HTML/CSS 让我的 DIV 跟随屏幕尺寸的宽度，但一旦它适合内容就停止扩展（它应该滚动 left/right 当 div不能完全包含内容）。

伪代码：

HTML:

<div class="image-container">
  <img width="1000">
</div>

CSS:

.image-container {
  /* ??? */
  display: inline-block; /* ??? */
  overflow: auto;
}

编辑：根据 Evadore 的回答，我能够得出以下 CSS。

.image-container {
  display: inline-block;
  overflow: auto;
}

/* optimize these px dimensions, 900 worked for my application */
@media (max-width: 900px) {
  .image-container {
    max-width: 710px;
  }
}

/* redundant, I plan to tweak this range later */
@media (min-width: 901px) and (max-width: 1575px) {
  .image-container {
    max-width: 710px;
  }
}

@media (min-width: 1576px) {
  .image-container {
    max-width: 1385px;
  }
}

以下参考也有帮助：w3schools

Answer 1

使用 CSS 媒体查询来设置各种屏幕尺寸。查看此 page 的源代码以了解如何使用媒体查询。

Answer 2

为此，将父 div 宽度设置为 fit-content 并将最大宽度设置为 100%。现在，如果屏幕尺寸不够大，父 div 将保持在内容宽度和屏幕宽度之间。最后，为了在小屏幕设备上的父级 div 内滚动，请放置 overflow:scroll.

这是Codepen demo

.parent {
  background-color: green;
  width: fit-content;
  max-width: 100%;
  overflow: scroll;
}

.child {
  padding: 30px;
  width: 700px;
  background-color: red;
  color: #fff;
}

<div class="parent">
  <div class="child">
    test string
  </div>
</div>

ps: 我添加了 bg 颜色仅供参考，以显示父组件是否正在扩展。

HTML/CSS 适合内容 Div 除非屏幕很小

HTML/CSS Fit Div to Contents unless screen is small

html

css

display