我建立了一个小网站,以获得乐趣,熟悉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/
解决方法
首先从图像标记中删除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; }
如果其中一个祖先元素的样式可能会干扰,您可以像这样重置它：
#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>
*,*: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%;
}
