I have an image (currently 1305 x 352 pixels) inside of a fluid-container like so:
<div class="container-fluid" id="lion-div">
<div class="row-fluid">
<img src="image.png" class="img-responsive"></img>
</div>
</div>
When the page width is at or smaller than the width of the image, the image scales to the full width of the page, which is what I want.
However, when the page width is larger, the image stays aligned to the left. I'd like it to stay in the middle of the page.
I've tried using margin-left and margin-right: auto on the div, even making a media container with min-width: 1306px and trying everything I know, but I can't get the image to center. Any ideas?
try this:
.row-fluid{text-align:center;}
.img-responsive{margin:0 auto}