移动视图中较长文本旁边的图像大小调整[重复]答案

【问题标题】：Image resizing beside longer text in mobile view [duplicate]移动视图中较长文本旁边的图像大小调整[重复]
【发布时间】：2021-06-25 19:39:34
【问题描述】：

我的文本旁边有一个图像，当我在较小的窗口（主要是移动视图）中查看它时，它会不断调整大小。正如您在我的预览中看到的那样，较短的文本不会调整图像的大小。当我写更多时，图像会调整大小。我尝试使用 flex wrap 来环绕较长的文本，但它只是将图像放在文本下方。有什么我只是想念的吗？提前感谢您的帮助。

.content-title {
  font-family: "Helvetica Neue", sans-serif;
  color: black;
}

.icon-img {
  background-image: url(https://cdn2.oceansbridge.com/2017/09/16181826/A-hermit-in-a-ruin.-1650-1668-Jan-Adriaensz.-van-Staveren-oil-painting.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 50%;
  width: 3.4em;
  height: 3.4em;
}

.content-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<div class="content-container">
  <div class="box">
    <div class="content-heading">
      <h3 class="content-title">Sample of longer longer longer longer longer longer longer longer longer longer longer longer longer text</h3>
      <div class="icon-img"></div>
    </div>
  </div>
</div>

<div class="content-container">
  <div class="box">
    <div class="content-heading">
      <h3 class="content-title">Sample of shorter text</h3>
      <div class="icon-img"></div>
    </div>
  </div>
</div>

【问题讨论】：

flex-shrink:0 到图片
感谢这个工作

标签： css image flexbox

【解决方案1】：

你可以给.content-title一个固定的宽度100%减去img width，使用calc，像这样：

width: calc(100% - 3.4em);

.content-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content-title {
  font-family: "Helvetica Neue", sans-serif;
  color: black;
  width: calc(100% - 3.4em);
}

.icon-img {
  background-image: url(https://cdn2.oceansbridge.com/2017/09/16181826/A-hermit-in-a-ruin.-1650-1668-Jan-Adriaensz.-van-Staveren-oil-painting.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 50%;
  width: 3.4em;
  height: 3.4em;
}

<div class="content-container">
  <div class="box">
    <div class="content-heading">
      <h3 class="content-title">Sample of longer longer longer longer longer longer longer longer longer longer longer longer longer text</h3>
      <div class="icon-img"></div>
    </div>
  </div>
</div>

<div class="content-container">
  <div class="box">
    <div class="content-heading">
      <h3 class="content-title">Sample of shorter text</h3>
      <div class="icon-img"></div>
    </div>
  </div>
</div>

一些有用的资源：

【讨论】：