具有明确定义的尺寸的 div 是用视口宽度缩放尺寸吗？答案

【问题标题】：Div with explicitly defined dimensions is scaling size with viewport width?具有明确定义的尺寸的 div 是用视口宽度缩放尺寸吗？
【发布时间】：2020-01-16 19:22:18
【问题描述】：

我在一个容器中有两个 div：一个包含图像，另一个包含文本。图像容器具有设置的尺寸width: 250px; 和height: 240px;，但是当屏幕（和包含的 div）足够窄时，图像容器除了设置为 @ 的另一个 div 之外开始减小大小987654323@.

我怀疑这是由于第二个内部 div 中的文本需要一定的空间并因此将图像容器向内“推”，但使用 word-break: break-word; 并没有解决问题。

风格：

/* "imagecontainer" and "credentials" are contained within "info-container" */

.subsection .info-container {
    display: flex;
}

.subsection .imagecontainer {
    width: 250px;
    height: 240px;
    margin: 0;
    padding: 0;
}

.subsection .imagecontainer img {
    width: 90%;
    height: 90%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin-top: 5px;
}

.subsection .credentials {
    width: 600px;
    height: 230px;
    padding: 10px;
    padding-right: 20px;
    position: relative;
    border-right: 1px solid #333;
}

/* This problem occurs at pageWidth<920px, when this media query would be in effect: */

@media only screen and (max-width: 920px) {
    .subsection .credentials {
        width: auto;
        border-right: none;
    }
}

标记：

<div class="subsection">
  <div class="info-container">
    <div class="imagecontainer">
      <img src="data/users/images/5d7d03b1d0013.png">
    </div>
    <div class="credentials" style="width: auto;">
      <div class="name">Test User</div>
      <div class="location">Albany, New York</div>
    </div>
  </div>
  <div class="actions">
    <div class="actions-container">
      <div class="action">
        <a class="btn btn-primary" href="viewprofile?id=5d7d03b1d0013">View profile</a>
      </div>
      <div class="action">
        <a class="btn btn-primary" href="connect?id=5d7d03b1d0013">Make Connection</a>
      </div>
    </div>
  </div>
</div>

预期：只有包含文本的 div 会根据视口宽度的变化调整其宽度。

实际：包含图像的 div 和包含文本的 div 的大小都减小了。

编辑：添加标记

【问题讨论】：

能否也提供标记？

标签： css responsive-design flexbox media-queries

【解决方案1】：

该图像容器的父容器具有display: flex;。如果您没有为子元素定义任何内容，它们将被允许缩小。

为避免这种情况，您可以在.subsection .imagecontainer 中添加flex-shrink: 0（这意味着它必须不会变小）。

【讨论】：