Menu
Responsive images Images in Bootstrap are made responsive with . img-fluid . This applies max-width: 100%; and height: auto; to the image so that it scales with the parent element.
The . img-fluid class makes an image responsive by automatically applying max-width: 100%; and height: auto; to it. As a result: The image scales with the parent element's width. The browser does not make the image larger than its container.
To make an image responsive, you need to give a new value to its width property. Then the height of the image will adjust itself automatically. The important thing to know is that you should always use relative units for the width property like percentage, rather than absolute ones like pixels.
Bootstrap is a free front-end framework for faster and easier web development. Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With