Question

我已经建立了一个小网站，以获得乐趣，熟悉bootstrap。

我遇到的问题是，无论我尝试什么，徽标图像都没有响应。

代码似乎很简单我相信我只是错过了一个小细节：

<div id="masthead">
  <div class="container">
    <div class="row">
      <div class="col-md-7 header-logo">
        <div class="header-logo" style="color: white;">
          <img src="/img/gros_buck_175.png"  class="img-responsive"  align="left" style="padding-right: 1.5em;padding-top: 0px; max-width: 184px;">
          <br>
          TEL: 450 955-3422 <br>
          182 CHEMIN D'ADAMSVILLE <br>
          J2L 2Y6, BROMONT<br>
          laboucheriedugrosbuck@gmail.com
          <br clear="all">
          </div>
      </div>
      <div class="col-md-5">
        <div class="well well-lg">
          <div class="row">
            <div class="col-sm-12">
              <img src="/img/sceau_140.png" class="img-responsive" align="left" style="padding-right: 1.2em;">
              <h3 style="margin-top:0px; margin-bottom: 1em;">PROMO</h3>
              FAITES VOTRE PLAN DE VIANDE:<br>
              ACHETEZ POUR PLUS DE 100$ DE PRODUITS
              À L'UNITÉ ET RECEVEZ 10% EN SAUCISSES.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div><!--/container-->
</div><!--/masthead-->

（这是一个重现问题的小提琴） - https://jsfiddle.net/JoshC/2XgDW/2/

Answer 1

首先从图片标记

中删除max-width: 184px属性

<img src="/img/gros_buck_175.png"
     class="img-responsive"
     align="left"
     style="padding-right: 1.5em;padding-top: 0px;">

虽然最好避免使用内联样式：

<img src="/img/gros_buck_175.png" class="img-responsive" id="myLogo" align="left">

#myLogo {
    padding-right: 1.5em;
    padding-top: 0px;
}

如果有可能是其中一个祖先元素＆＃39;样式可能会干扰，您可以像这样重置：

#myLogo {
    all: initial!important;
    width: 100%!important;
    height: auto!important;
}

如果您仍然面临此问题，则下一步将是使用JavaScript

Object.assign(document.getElementById('myLogo').style, {
    all: 'initial',
    width: '100%',
    height: 'auto'
});

此代码应包含在文档中的元素之后，否则它将无法找到指定的元素，因为它还不存在。

现在您已将示例添加到您的问题中，您可以通过替换以下CSS来使图像呈现其自然大小：

img {
    display:table-cell;
    width:100%;
    height:auto;
}

使用这个CSS：

img {
    display:inline-block;
}

（Demo）

我相信您使用display: table会干扰您的设计。下面是两种实现相同布局而没有黑客攻击的方法。

CSS3方法

所有相关的现代浏览器都支持此方法，因此如果您不关心与旧浏览器的向后兼容性，则可以使用此方法。

（Demo）

<div class="inline-wrap">
    <img src="http://placehold.it/150x150" />
    <div class="text-wrap">Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text</div>
</div>

*,*:before,*:after {
    box-sizing: border-box;
}
.inline-wrap {
    white-space: nowrap;
    font-size: 0;
    height: 150px;
}
.inline-wrap img {
    width: 150px;
}
.inline-wrap .text-wrap {
    white-space: initial;
    font-size: initial;
    display: inline-block;
    height: 100%;
    width: 65%; /* Fallback */
    width: calc(100% - 150px);
}

表格方法

为了向后兼容，您可以使用此方法。

（Demo）

<table>
    <tr>
        <td class="img-wrap">
            <img src="http://placehold.it/150x150" />
        </td>
        <td class="text-wrap">Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text</td>
    </tr>
</table>

*, *:before, *:after {
    box-sizing: border-box;
}
table, tr, td {
    border: 0;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
}
table {
    width:100%;
}
table .img-wrap {
    font-size: 0;
}
table .text-wrap {
    width: 100%;
    height: 100%;
}

Answer 2

尝试将max-width更改为width: 100%，告诉它占据容器宽度的100％，但随着容器宽度的变化，图像尺寸也会发生变化，同时始终保持100％的宽度覆盖范围。
这应该工作，如果它不让我知道，我会稍微破解它。我只是在手机上，所以我真的不想用触摸屏键盘在任何地方沙箱。如果这不起作用，明天下午我会在我的电脑上将其破解：D！

聚苯乙烯。是否有理由在一个div中声明类.header-logo然后在下一个div中再次为它提供相同的类。我理解它是否是一个不同的div块，但这实际上是标题徽标中的标题徽标

bootstrap-3 - img-responsive不工作

2 个答案: