Question

我很想知道你是如何解决以下问题的。

使用24个柱的Bootstrap 3和30px的网格装订线。在宽屏显示中，我使用col-7作为左侧边栏，使用col-17作为主要内容。问题是bootstrap是用百分比计算宽度。所以我的侧边栏有339.5px（29.16667％），内容有824.484px（70.83333％）。

＆＃13;

<div class="row">
  <aside class="col-lg-7">[sidebar]</aside>
  <div class="col-lg-17">[main content]</div>
</div>

＆＃13;

现在，我使用lazysizes和lazyaspectratio这样的脚本来延迟加载我的图片，并且即使图像尚未加载，图像容器也保持相同的尺寸。使用lazyaspectratio时，宽度必须为100％才能重新计算要保持的高度。

但是......因为有一个但是......如果我的主要内容是824.484px宽度，那么图片的宽度也是824.484px，而且图片质量很差。假设我的图片显示必须是824px，最后的图片显示很糟糕，即使比例得到尊重，我也会失去质量。

我的问题是：如何使用img＆gt;绕过此问题宽度= 100％？

我在几个主题上看到人们正在修复＆＃34;行子的宽度，如下所示：

＆＃13;

div.row > aside.col-lg-7 {
  width: 340px;
}
div.row > div.col-lg-17 {
  max-width: 824px;
}

＆＃13;

保持img＆gt;似乎是一个很好的解决方案。 width = 100％并且具有整数列宽度，但是使用此解决方案，我必须添加许多css规则来管理多个col- *和倍数媒体查询......

而你呢？你怎么解决这类问题？因为我认为使用宽度= 100％的img-responsive类会导致基于百分比的宽度的质量损失使用Bootstrap 3 ...我确定我不是唯一遇到此问题的人。

提前感谢任何建议。

Answer 1

自定义引导程序

titouille：你可以创建一个Javascript，根据他们的类或父母将图像宽度向下舍入。

对于您在col或parent的宽度中读取的每个图像元素，并将其设置为（粗糙度为1 px），因为它的最大宽度