CSS有没有办法确定和调整图像宽度？答案

【问题标题】：Is there a way for CSS to determine and adjust for image widths?CSS有没有办法确定和调整图像宽度？
【发布时间】：2019-06-23 18:05:38
【问题描述】：

感谢Erik's help 在我的最后一个问题上，我能够让我的图标左、文本右浮动 div 示例正常工作：

http://tanguay.info/web/examples/tablelessItemLayout

_{（来源：tanguay.info）}

但是，由于图像的宽度不同，我不得不通过在一些标签中放置内嵌样式来作弊。

如何更改此代码，以便：

没有内嵌样式
支持各种尺寸的图片宽度

代码：

<html>

  <style>

    * { margin: 0; padding: 0 }

    body {
      padding: 20px;
      text-align: center;
      background-color: #333;
    } 

    p {
      margin: 0 0 10px 0;
    }

    #content {
      width: 600px;
      margin-left: auto;
      margin-right: auto;
      background: brown;
      border: 1px solid #555;
      text-align: left;
    }

    .item {
      margin: 20px;
      background-image:url('paperBackground.jpg');
      padding: 20px;
    }

    .itemIcon {
      float:left;         
    }

    .itemIcon p {
      font-size: 8pt;
      margin: 5px 0 0 0;
    }

    .itemBody h1 {
      font-size: 18pt;
      color: brown;
      margin: 0 0 10px 0;
    }

    .clear {
      clear: both;
    }

  </style>

<body>

<div id="content">

  <div class="item">   
    <div class="itemIcon" style="width: 70px; padding-left: -80px">
      <img src="icon.png" alt=""/> 
      <p>This is the caption that is under the image.</p> 
    </div>
    <div class="itemBody" style="margin-left: 80px">    
      <h1>This is the first item</h1>
      <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
      <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
    </div> 
  </div>

  <div class="item">  
    <div class="itemIcon" style="width: 160px; padding-left: -170px">
      <img src="bigIcon.png" alt=""/> 
      <p>This is the caption that is under the image and it is a very long text so it is going to wrap a couple times here in the left column under the image.</p>  
    </div>
    <div class="itemBody" style="margin-left: 170px">  
      <h1>This is the second item</h1>
      <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
      <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
    </div>    
  </div> 

</div>

</body>
</html>

【问题讨论】：

你为什么不在 CSS 上强制图像大小？

标签： css html

【解决方案1】：

如果您将overflow: auto 添加到.itemBody，则可以删除这些自定义内联边距和填充：

.itemIcon {
    float: left;
    margin-right: 10px;
}
.itemBody {
    overflow: auto;
}

但是，您将无法像这样摆脱 .itemIcon 上的内联宽度，因为 CSS 中无法将 <p> 的宽度限制为它之前的图像的宽度.如果你只有一张图片，但没有文字，你就不需要宽度。

如果您使用 CSS 表格，您可以完全摆脱内联样式：

.itemIcon {
    display: table-cell;
    padding-right: 10px;
}
.itemBody {
    display: table-cell;
    vertical-align: top;
    width: 100%;
}

itemBody 上的width: 100% 强制将itemIcon 的宽度降低到其最小宽度，该宽度由图像的宽度决定。 vertical-align: top 将阻止itemBody 的第一行与itemIcon“表格列”中的图像/文本对齐。

【讨论】：

【解决方案2】：

您的问题的最佳解决方案可能是使用 JavaScript 动态修改 CSS。 JQuery's .width() 允许您执行诸如获取图像宽度之类的操作，.css() 可用于修改元素的 CSS（包括宽度、边距和内边距）。我的建议是为每个itemIcon 和itemBody 添加一个ID，然后使用onload() event 适当地设置div 的样式。

【讨论】：

【解决方案3】：

我希望有人可以为您提供基于 div/css 的解决方案。但是为了处理不同的图像宽度，我认为您需要以下四件事之一：

手动创建的内联样式（就像现在一样）
在服务器端代码中创建的内联样式
用 javascript 调整文本块的宽度
每个图像和文本块的单行表

也许这只是我想象的失败，但我不认为这种布局可以不以某种方式设置特定的段落宽度，或者为每个块使用单行表。

【讨论】：

【解决方案4】：

据我所知，CSS 没有为条件运算符或基于逻辑的操作提供任何方法。这意味着您的选择受限于：

服务器端图像调整
客户端图像或样式调整
使用 css 为图像应用一致的宽度

在所有这些中，我将讨论第三点，它提供了几个选项。

首先是使用：

img {width: 100px; /* or whatever */ }

第二个仅限于使用 absolute 定位的图像：

img {clip: rect(0 100 100 0); } /* which will take the original image and clip it to the specified dimensions (top, right, bottom, left) */

【讨论】：

【解决方案5】：

内联样式很容易处理。向.item 添加一个类，例如.big，然后HTML 是，例如，

<div class="item big">

风格是

.item.big .itemIcon { width: 160px; padding-left: -170px; }
.item.big .itemBody { margin-left: 170px; }

没有办法单独使用 CSS 来动态更改数字。您可以使用 javascript 或服务器端函数来插入类名等。如果您自动生成图像，您将同时处理此问题。如果您是手工完成的，添加一个类会更容易。

【讨论】：

【解决方案6】：

天哪，大家都忘了桌子：）。我猜 table 很适合这类问题。

<div class="item"> 
    <table>
    <tr>
    <td class="image">
    <div class="itemIcon" >
      <img src="icon.png" alt=""/> 
      <p>This is the caption that is under the image.</p>  
    </div>
    </td>
    <td>
    <div class="itemBody" >    
      <h1>This is the first item</h1>
      <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
      <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
    </div> 
    </td>
    </tr>
    </table>
  </div>

td.image {
     vertical-align:top;
    }

【讨论】：