twitter-bootstrap bootstrap-3 - img-responsive 不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29957365/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap-3 - img-responsive not working
提问by stefgosselin
I have built a small site for fun, getting familiar with bootstrap.
我建立了一个小网站来玩，熟悉引导程序。
The issue I have is that the logo image is not responsive, no matter what I try.
我遇到的问题是无论我尝试什么，徽标图像都没有响应。
The code seems quite straightforward I am sure I am just missing a minor detail:
代码看起来很简单，我确定我只是遗漏了一个小细节：
<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>
[email protected]
<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-->
( Here is a fiddle reproducing the issue ) - https://jsfiddle.net/JoshC/2XgDW/2/
（这是一个重现问题的小提琴） - https://jsfiddle.net/JoshC/2XgDW/2/
回答by
First remove the max-width: 184pxattribute from the image tag
首先max-width: 184px从图像标签中删除属性
<img src="/img/gros_buck_175.png"
class="img-responsive"
align="left"
style="padding-right: 1.5em;padding-top: 0px;">
Although it would be better to avoid the use of inline styling:
虽然最好避免使用内联样式：
<img src="/img/gros_buck_175.png" class="img-responsive" id="myLogo" align="left">
#myLogo {
padding-right: 1.5em;
padding-top: 0px;
}
If there is a possibility that one of the ancestor elements' styling may be interfering, you can reset it like so:
如果祖先元素的样式之一有可能受到干扰，您可以像这样重置它：
#myLogo {
all: initial!important;
width: 100%!important;
height: auto!important;
}
If you're still facing the issue, the next step would be to use JavaScript
如果您仍然面临这个问题，下一步是使用 JavaScript
Object.assign(document.getElementById('myLogo').style, {
all: 'initial',
width: '100%',
height: 'auto'
});
This code should be included after the element in the document otherwise it will not be able to find the specified element as it won't exist yet.
此代码应包含在文档中的元素之后，否则它将无法找到指定的元素，因为它尚不存在。
Now that you've added the example to your question, you can make the image assume its natural size by replacing the following CSS:
现在您已将示例添加到您的问题中，您可以通过替换以下 CSS 使图像采用其自然大小：
img {
display:table-cell;
width:100%;
height:auto;
}
With this CSS:
使用这个 CSS：
img {
display:inline-block;
}
(Demo)
（演示）
I believe that your use of display: tableis interfering with your design. Below are two methods of achieving the same layout without hacks.
我相信您的使用display: table正在干扰您的设计。以下是两种无需黑客即可实现相同布局的方法。
CSS3 Method
CSS3 方法
All relevant modern browsers support this method so if you dont care about backwards compatibility with old browsers, you can use this method.
所有相关的现代浏览器都支持此方法，因此如果您不关心与旧浏览器的向后兼容性，则可以使用此方法。
(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);
}
Table Method
表法
For backwards compatibility you can use this method.
为了向后兼容，您可以使用此方法。
(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%;
}
回答by Kevin Leegsma
Try changing max-widthto width: 100%that should tell it to take up 100% of the containers width, but as the containers width changes, so will the images size, while always maintaining 100% width coverage.
This SHOULD work, if it doesn't let me know and I'll hack it out a bit. I'm just on my phone so I don't really want to sandbox it anywhere with a touchscreen keyboard. If this doesn't work, I'll hack it out on my PC tomorrow afternoon :D!
尝试更改max-width为width: 100%应该告诉它占据容器宽度的 100%，但随着容器宽度的变化，图像大小也会发生变化，同时始终保持 100% 的宽度覆盖。
这应该有效，如果它不让我知道，我会稍微修改一下。我只是在玩手机，所以我真的不想用触摸屏键盘在任何地方沙盒它。如果这不起作用，我明天下午会在我的电脑上破解它：D！
Ps. Is there a reason you declare class .header-logoin one div and then again in the next div give it the same class. I understand if it was a different div block, but this is essentially a header logo inside a header logo
附言。您是否有理由.header-logo在一个 div 中声明类，然后在下一个 div 中再次给它相同的类。我知道它是否是不同的 div 块，但这本质上是标题徽标内的标题徽标
