css img-response wont work properly
When I put the img-responsive in the img tag it does work, but it will not center. When I move it to the div tag it won't work at all.
example 1:
example 2:
.titleBannerImg {background-color:#808080;
example 1:
<div class="row">
<div class="row titleBannerImg">
<div style="text-align:center"><img src="images/TitlePageBanner.jpg" class="img-responsive" ></div>
</div>
</div> example 2:
<div class="row">
<div class="row titleBannerImg">
<div style="text-align:center" class="img-responsive" ><img src="images/TitlePageBanner.jpg"></div>
</div>
</div> .titleBannerImg {background-color:#808080;
First question - why do you have nested row's ?
Second question - what is the effect you were expecting.
Here is the Bootstrap img-responsive style
What happens when you apply this to an element?
The max-width gets set to 100% (ignore the width - that is a hack for old IE versions - it is ignored in other browsers)
If applied to an image it will make the image size with its container (parent)
if applied to the parent (which is a block element in this case) the net effect is the same as if it was not applied. The image now has no instruction to resize with its container so it remains unchanged.
Second question - what is the effect you were expecting.
Here is the Bootstrap img-responsive style
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
width: 100% \9;
max-width: 100%;
height: auto;
}What happens when you apply this to an element?
The max-width gets set to 100% (ignore the width - that is a hack for old IE versions - it is ignored in other browsers)
If applied to an image it will make the image size with its container (parent)
if applied to the parent (which is a block element in this case) the net effect is the same as if it was not applied. The image now has no instruction to resize with its container so it remains unchanged.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
That makes it responsive, but it doesn't center it. I moves the banner all the way to the left.
ASKER
I tried putting text-align:center in all the div's and the img tag, but it will not center:
<div class="row">
<div class="row titleBannerImg">
<div><img class="img-responsive" style="margin:: 0 auto" src="images/TitlePageBanne
</div>
</div>
<div class="row">
<div class="row titleBannerImg">
<div><img class="img-responsive" style="margin:: 0 auto" src="images/TitlePageBanne
</div>
</div>
Look at the img-responsive style - it has max-width 100% - if the image is larger than the container it is going to fill the container so margin: 0 auto does nothing - there is no space either side for the auto to work on.
What does the html look like for the rest of the page - you probably need to do your center further up the hierarchy.
What does the html look like for the rest of the page - you probably need to do your center further up the hierarchy.
ASKER
That worked. Thank you for you time.
As for centering, it's hard to know without more information. Is there a URL where we can see it in action?
If there is no URL can you post the css for "row"