Vertically Center Image on Page and Maintain Aspect Ratio on Resize

Vertically center image on page and maintain aspect ratio on resize

If the image is big enough, you can use max-width and max-height instead of width and height. This will reduce the size of the image as necessary, maintaining the aspect ratio.

img {
    max-width: 70%;
    max-height: 70%;
}

To center it, you can use the absolute centering technique...

.wrap {
    position: relative;
}
img {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

html, body, .image, .wrap {

  height: 100%;

  padding: 0;

  margin: 0;

}

.wrap {

  position: relative;

}

img {

  max-width: 70%;

  max-height: 70%;

  margin: auto;

  position: absolute;

  top: 0; left: 0; bottom: 0; right: 0;

}

.text {

  margin-top: -50px;

  text-align: center;  

}

<div class="image">

  <div class="wrap">

    <img src="http://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg">

  </div>

</div>

<div class="text">Scroll down</div>

Keep div centered with keeping aspect ratio and resizing vertically or horizontally

Final Update:

It turned into a SCSS question, with any input for variable width or height it can be done like this:

http://jsfiddle.net/832v5f0L/41

 $div-width : 1600;
 $div-height : 900;

 $ratio: $div-width / $div-height;

  @media screen and (max-width: (100 * $ratio) + vh) {
    width: 100vw; // always 100vw to fill
    height: (100 / $ratio) + vw; // 100 / ratio
  }

  @media screen and (min-width: (100 * $ratio) + vh) {
    width: (100 * $ratio) + vh;  //100 * ratio
    height: 100vh; // always 100vh to fill
  }

Updated answer:

Media query portrait automatically activates when width is smaller than height. Which makes sure we can use the vh and vw to obtain the maximum possible size without reaching an overflow.

The ratio between the width and height will make sure you can get a fixed aspect ratio.

    body {

  width: 100%;

  height: 100%;

}

.wrapper {

  position: absolute;

  left: 50%;

  top: 50%;

  -webkit-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

}

/* 

100vh * (100 / height) 

with hright 50:

100vh * 100 / 50 = 200vh

*/

@media screen and (max-width: 200vh) {

  .wrapper {

      width: 100vw;

      height: 50vw;

  }

}

@media screen and (min-width: 200vh) {

  .wrapper {

      width: 200vh;

      height: 100vh;

  }

}

.img {

/*   padding-top: 50%; */

  width: 100%;

  height: 100%;

  background: #ccc;

  text-align: center;

  background-img: url()

}

<div class="wrapper">

  <div class="img">

    **IMG HERE**

  </div>

  

</div>

CSS force image resize and keep aspect ratio

img {

  display: block;

  max-width:230px;

  max-height:95px;

  width: auto;

  height: auto;

}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>

<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

Auto Center and Keep Aspect Ratio of Image in Div

JSFiddle - DEMO

You should use display: inline-block; to #imageHolder img to vertical-align middle.

CSS display inline-block property allows elements to flow like inline elements but respect properties, such as width, like block elements and you can use display Inline-block to set vertical-align middle.

HTML:

<div id="imageHolder">
    <img src="http://www.discoverjb.com/wp-content/uploads/2014/07/IMG_1399.jpg">
</div>

CSS:

#imageHolder {
    width: 400px;
    height: 400px;
    line-height: 400px;
    background-color:#CCCCCC;
}
#imageHolder img {
    max-width: 100%;
    max-height:100%;
    display: inline-block; /* Instead of display: block; */
    margin: 0 auto;
    vertical-align: middle;
}

Width Full Image - Maintain Aspect Ratio and Keep in Center Horizontally and Vertically

UPDATE:

I think I know what you want now. Interesting problem. So vertical centering, with the possibility of cropping off even amounts of the top and bottom of the image due to the priority of keeping the center of the image in the center of your window.

I found an example that might help you at another website :

http://demo.solemone.de/overflow-image-with-vertical-centering-for-responsive-web-design/

Try his example and let me know if it works for you or at least gets you closer to your ideal solution! I will try to help further as needed after I hear back from you.

CSS resize div whilst maintaining aspect ratio of containing image

Try to apply this style and remove inline-styling from element:

#triangle {
    height:500px;
    width: max-content;
}

img {
    height:100%;
}

Keep aspect ratio of vertical aligned image in flex box

updated jsFiddle

Try wrapping the image in another div. <img> elements behave differently than <div> elements when width and height are applied.

For example width: 100% applied to <img> means that the image element will have the same width as the source picture. If you apply width: 100% to <div>, it would have the same width as the first parent with defined width.

Thus, your desired html will be:

<div class='box'>
    <div class='wrapper'>
        <img src="http://placekitten.com/g/200/300" />
    </div>
</div>    

With corresponding css for wrapper div:

div.wrapper {max-height:100%;}

How to shrink divs vertically while keeping aspect ratio and location relative to other divs?

Ok. So with the help of vmin units and aspect ratio media queries I was able to put together something that reflects what works best for me as a solution to this question:

/* ///////////////////////////////// IMPORTS /////////////////////////////// */

@import url( "https://necolas.github.io/normalize.css/latest/normalize.css" );

/* ///////////////////////////////// INITIAL /////////////////////////////// */

* {

  box-sizing: border-box;

  overflow: hidden;

}

html {

  height: 100%;

  background-color: #fff;

}

html, body {

  padding: 0.5%;

}

body {

  max-width: 1000px;

  background-color: #eee;

}

body, .top-contr {

  margin: auto;

}

p {

  margin: 0;

  padding: 0;

  text-align: center;

  color: #aaa;

}

/* ///////////////////////////////// STRUCTURE ///////////////////////////// */

/* / / / / / / / / / / / / / / / / / / HEADER / / / / / / / / / / / / / / / /*/

header, footer, main .top-contr {

  padding: 1%;

}

header .top-contr {

  background-color: #ddd;

  padding: 15%;

}

.top-contr, .v-cntr, .v-cntr-a {

  position: relative;

}

.cnt {

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

}

/* / / / / / / / / / / / / / / / / / / MAIN / / / / / / / / / / / / / / / / /*/

main .top-contr {

  width: 33.333%;

  float: left;

}

main .mid-contr {

  background-color: #ccc;

  padding: 45%;

}

main .cnt {

  padding: 4%;

}

/* / / / / / / / / / / / / / / / / / / FOOTER / / / / / / / / / / / / / / / /*/

footer .top-contr {

  background-color: #bbb;

  padding: 5%;

}

/* //////////////////////////////// CORE CLASSES /////////////////////////// */

.clr-fix::after {

  content: "";

  display: block;

  clear: both;

}

.v-cntr {

  top: 50%;

  transform: translateY( -50% );

}

/* /////////////////////////////// MEDIA QUERIES /////////////////////////// */

@media ( min-aspect-ratio: 3/2 ) {

  body {

    width: 135vmin;

    height: 100vmin;

  }

}

@media ( min-aspect-ratio: 3/2 ) and ( min-width: 1000px ) {

  .v-cntr-a {

    top: 50%;

    transform: translateY( -50% );

  }

}

<body class="v-cntr">                  <!-- << v-cntr = vertically center -->

  <div class="wrapper v-cntr-a">

  

    <!-- ----------------------------- HEADER --------------------------- -->

    <header>

      <div class="top-contr">                   <!-- << contr = container -->

        <div class="cnt">                           <!-- << cnt = content -->

          <p class="v-cntr">header</p>

        </div>

      </div>

    </header>

    <!-- ------------------------------ MAIN ---------------------------- -->

    <main>

      <div class="top-contr">

        <div class="mid-contr">

          <div class="cnt">

            <p class="v-cntr">rectangle 1</p>

          </div>

        </div>

      </div>

      <div class="top-contr">

        <div class="mid-contr">

          <div class="cnt">

            <p class="v-cntr">rectangle 2</p>

          </div>

        </div>

      </div>

      <div class="top-contr">

        <div class="mid-contr">

          <div class="cnt">

            <p class="v-cntr">rectangle 3</p>

          </div>

        </div>

      </div>

    </main>

    <!-- ----------------------------- FOOTER --------------------------- -->

    <footer>

      <div class="top-contr">

        <div class="cnt">

          <p class="v-cntr">footer</p>

        </div>

      </div>

    </footer>

  </div>

</body>

---

Related Topics