0

I have this insanely frustrating issue involving an image on my home page.

I have a banner with an image that will resize itself in every frustrating way imaginable and it will not stay centered. After spending the better part of a day on this, I thought I'd ask. I've tried all kinds of things, and no for some reason, I'm unable to do @media step downs with height? The image is inherently 800px by 600px or half my normal banner size. I want it to stay centered as it resizes. My right col works fine - just text within. the css below works well when the resolution is between 1920X1080 and around 1300

html

<div class="row">
    <div class="col-md-6">
        <div class="bgHomeBannerImageDiv">
            <img src="~/Content/Images/image.jpg" class="bgHomeBannerImage" />
        </div>
    </div>
    <div class="col-md-6">
        <h1 class="testclass">Test<h1>
    </div>
</div>

css 

.bgHomeBannerImageDiv {
    padding:10% 25% 25% 25%; 
    height:600px; 
    width:100%;
    }

.bgHomeBannerImage {
    width:100%;
    }

Additionally, I'm not sure why I have to use padding-top at 10% to keep it vertically centered.

Any suggestions - thanks all.

user3704744
  • 13
  • 5
  • possible duplicate of [Twitter Bootstrap - how to center elements horizontally or vertically](http://stackoverflow.com/questions/10088706/twitter-bootstrap-how-to-center-elements-horizontally-or-vertically) – Paulie_D Aug 20 '14 at 15:38
  • I think my question is more related to the image resizing issue when changes screen sizes. For example if I ctrl mousewheel(zoom-in) to mimic a smaller screen or pull my window smaller, the image with shrink and then slowly move off the page even though it should still be centered. – user3704744 Aug 20 '14 at 15:53
  • You can also use a flexbox see this article http://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically – DivineChef Aug 20 '14 at 16:02

2 Answers2

1

I did it this way.

<div class="row">
<div class="col-md-6">
 <div class="bgHomeBannerImageDiv">
    <img src="images/image_people.jpg" class="img-responsive bgHomeBannerImage"/>
</div>
</div>
<div class="col-md-6">
    <h1 class="testclass">Test<h1>
</div>
</div>

<style type="text/css">
.bgHomeBannerImage{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
 }    
.bgHomeBannerImageDiv{height: 600px;}
</style>
Md. Salahuddin
  • 1,062
  • 15
  • 22
  • Thanks it was a combination of img-responsive and some other css, and it still is a bit weird when zooming in vs actually viewing on a smaller screen. But definitely closer. Thanks to you and skiwether, but I gave you the answer because of the additionally css. – user3704744 Aug 20 '14 at 22:02
  • it helped me as well your solution with a "battle" I had to center an image among three in a row (bootstrap3) – hephestos Jul 10 '19 at 20:19
0

Have you tried adding the "img-responsive" Bootstrap class to the img tag?

SkiWether
  • 38
  • 7