CODEWITHSUNDEEP
htmlcss
Bri Bri
Bri Bri

Reputation: 2270

How do I horizontally and vertically center an image on the page, except for when it's too big to fit?

I'm trying to implement a basic image viewer using HTML and CSS, where the image remains centered in the page, except for when it's too big to fit. In that case, the user should be able to scroll to see the rest of the image with no margins. If only one dimension is too big to fit, the other dimension remains centered. There is nothing else on the page other than the image.

However, the size of the image needs to be specified by a scaling factor so that I can enlarge or shrink it relative to its original size. This means I can't use an explicit width/height in pixels or size it relative to the size of the page. I've tried adjusting its transform css property, i.e. transform: scale(2.5) but that generally causes the top of the image to be cut off. I've also tried doing this by making the image's display property by set to inline-block and its height property set to auto so that I can set its width to the percentage I want it to be scaled by, but I can't figure out how to keep it centered on page as described in the above paragraph.

How can I accomplish this? So far I've tried around a dozen different ways of centering an element on the page, and none of them result in this exact behavior I'm shooting for. For example, I've used flexboxes to keep the image centered horizontally and vertically, but as soon as it grows too tall to fit, (again) the top of the image gets cut off.

Upvotes: 0

Views: 107

Answers (2)

Temani Afif
Temani Afif

Reputation: 272789

You can use flexbox and center with margin to obtain this:

body {
 min-height:100vh;
 margin:0;
 display:flex;
}
body > img {
 margin:auto;
}
<img src="https://picsum.photos/500/500?image=1069" >

And in case you don't want scroll apply max-height/max-width:

body {
 height:100vh;
 margin:0;
 display:flex;
}
body > img {
 margin:auto;
 max-width:100%;
 max-height:100%;
}
<img src="https://picsum.photos/500/500?image=1069" >

Upvotes: 1

Cornel
Cornel

Reputation: 72

there are several ways to achieve horizontal and vertical alignment. However, they are usually done separately and in different ways. You can have a look at W3Schools, they do a few tutorials on each:

W3Schools Alignment Tutorial

Also if you are willing to use bootstrap (makes everything much easier, especially centering) you can have a look at the following link:

BootStrap Grid System Tutorial

Below is a quick method on for centering. Credit goes to: This Post with some minor improvements from myself.

.outer {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  text-align:center;
  /*whatever width you want*/
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions