CODEWITHSUNDEEP
cssresponsive-design
Hectooorr
Hectooorr

Reputation: 735

Keep images centered when resizing

I want to keep the image centered when I resize the browser.

Check out my fiddle

I'm using the following code but everytime I resize the browser, my image does not keep center (x/y). Also it should work with IE9 and up. Any help would be appreciated!

    .container {
    height: 580px;
    width:700px;
    margin: 0 auto;
    z-index: 1;
    overflow: hidden;
    position: relative;
    border:1px solid black;
}
.container img {
    position: absolute;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    margin: auto;
    height: 580px;
}

Upvotes: 2

Views: 8430

Answers (2)

APAD1
APAD1

Reputation: 13666

You could do it by positioning the container 50% top and left and then setting a negative top/left margin half the size of the container. You will have to move the overflow:hidden down to the image container like so:

.container {
    height: 580px;
    width:700px;
    margin: 0 auto;
    z-index: 1;
    border:1px solid black;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-290px;
    margin-left:-350px;
}
.image {
    overflow: hidden;
}
.content{
    text-align:center;
}

I also moved the text div into the container so it would be centered as well.

Updated Fiddle

Upvotes: 2

Nanang Mahdaen El-Agung
Nanang Mahdaen El-Agung

Reputation: 1434

Example to center element vertically and horizontally.

.container {
  display: block;
  width: 256px;
  height: 256px;
  overflow: hidden;
  background: #555;
  position: relative;
}

.container .center {
  display: block;
  padding: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: #999;
  text-align: center;
}
<div class="container">
  <div class="center">
    Lorem ipsum dolor
  </div>
</div>

Upvotes: 2

Related Questions