是否可以使用纯 CSS 根据包含的图像宽度调整 div 的宽度，但不能在浏览器窗口调整大小时？答案

【问题标题】：Is it possible to use pure CSS to resize a div's width based on contained image width, but not when browser window resizes?是否可以使用纯 CSS 根据包含的图像宽度调整 div 的宽度，但不能在浏览器窗口调整大小时？
【发布时间】：2014-01-16 04:21:01
【问题描述】：

我正在制作一个 tumblr 主题，并在每个呈现的帖子周围创建一个 div。对于我的索引页面，我使用标记将照片帖子的图像设置为宽度为400px

<img src="{PhotoURL-400}" width="400" alt="{PhotoAlt}" />

照片帖子看起来不错，但有时文本帖子会得到几个系列的blockquotes，而这些帖子可能包含不幸地会扩展到框外的图像。

一些澄清：在 tumblr 上，“照片帖子”是带有 HTML 标题的图像，而文本帖子基本上只是一些 HTML。此 HTML 标题外的图像被限制为我在模板标记中设置的大小，但 HTML 标题内的图像（以及一般的文本帖子中）不受限制。

我正在寻求的行为是这些 divs 将始终为 400px 宽，所有边都有 10px 填充，除非包含的内容溢出容器之外，在这种情况下，宽度将调整以适应该内容.但是，更改浏览器窗口的大小不应影响divs 的大小。 HTML 标题中的图像永远不应该调整大小；它与照片帖子的图片不同。

标记的外观如下：

<div class="post-box">
  <article class="post">
    <p>...</p>
    <blockquote>
      <p>...</p>
      <p>
          <img src="..." />
      </p>
    </blockquote>
    <p>...</p>
  </article>
</div>

到目前为止，我的 CSS 是这样的：

.post-box {
  display: block;
  padding: 10px 10px 10px 10px;
  margin-bottom: 10px;
  opacity: 0.8;
  background-color: {color:Postbox Color};
  {block:IndexPage}
    min-width: 400px;
    width: 0%;
    max-width: 800px;
  {/block:IndexPage}
}
.post-box img {
  display: inline-block;
  line-height: 0;
}

有没有办法用纯 CSS 做到这一点？

编辑：此图可能有助于阐明我的需求。这也是一个小提琴：http://jsfiddle.net/B35AW/1/

【问题讨论】：

很难理解您希望邮箱 div、块引用和图像处于的最终状态？它的出现就像您希望布局和书面内容具有响应性但您不希望图像调整到 400 像素以下？
@Lowkase 照片帖子的模板使照片的宽度为400px，但文本帖子的模板使图像具有原始宽度。后一种图像不应调整大小。 div 的宽度至少应为 400px，但如果其中有此类图像太大而无法放入该框，则应该更宽，无论是由于它们的尺寸还是因为缩进blockquotes 或两者兼而有之。

标签： html css tumblr

【解决方案1】：

这里有满足你盒子需求的东西：

.post-box {
  display: block;
  padding: 10px 10px 10px 10px;
  margin-bottom: 10px;
  opacity: 0.8;
  background-color: blue;
  min-width: 400px;
  width: auto;
  max-width: 800px;
  float:left;
}
.post img {
  display: block;
  line-height: 0;
  width:400px;
}

.post {
  display: block;
  width:100%;
}

【讨论】：

这不起作用。它将自动扩展为800px。看到这个小提琴：jsfiddle.net/B35AW
我更新了我的答案以处理您仍然看到的问题。但是，除非您为 jsfiddle 中使用的块引用创建一些 CSS，否则它将比 400 像素宽，因为块引用具有默认边距和填充。
如果内容溢出，它仍然会自动扩展为800px。我为blockquotes 添加了CSS，但没有任何区别。我也不想/不需要float: left;，也不想将article.post 中的imgs 调整为400px 宽，但我非常感谢到目前为止的帮助。
好吧，这个解决方案没有浮动就行不通。您需要它来使其其余部分正常工作，并且您确实在问题的最顶部说您拥有所有 400 像素的图片。祝你好运找到解决方案。
删除float并将display:block替换为display:inline-block，它也可以工作。我在你的小提琴中检查了它，效果很好。

【解决方案2】：

试试这个 .post-box img { 显示：块；行高：0；最大宽度：100%；高度：自动 }

编辑：我只是将 max-width 更改为 width 并删除了 height 并且它正在工作，正如您在屏幕截图中看到的那样

【讨论】：

这似乎什么也没做。

【解决方案3】：

我无法为此找到纯 CSS 解决方案，但我确实编写了一些 JavaScript 来处理我的解决方案（使用 jQuery）：

function boxExpandForContents() {
  $.each($('.post-box'), function(i, box){
    var width = 0, $box = $(box);
    var padding = parseInt($box.css('padding-left')) + parseInt($box.css('padding-right'));
    $.each($box.find('p img'), function(j, img){
      width = (img.x + img.width > width) ? img.x + img.width : width;
      if (width > 800) {
        width = 800;
        $(img).width(width - img.x);
      }
    });
    width = width - padding;
    width = (width > 500) ? width : 500;
    $box.width(width);
    $box.find('.post-info').width(width);
  })
}
$(document).ready(function() {
  boxExpandForContents();
});

使用$box.find('p img') 让我抓取由{Caption} 标记呈现的HTML 中的任何图像。这是我能做的最好的了。

【讨论】：