0

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.

Bri Bri
  • 2,169
  • 3
  • 19
  • 44

2 Answers2

1

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" >
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • I'm surprised there is such a simple solution. – fubar May 28 '18 at 23:30
  • Do you know how I could scale the image up and down using this method? I need to be able to resize the image using a scaling value, i.e. 2.5 makes the image 2.5 times larger than its normal size. If I use the CSS property `transform = scale(2.5)` though the top of the image gets cut off. I'm not sure if there's a good way for me to use the `width` / `height` css property of the image without having it be relative to the size of the page rather than the size of the image. – Bri Bri May 28 '18 at 23:45
0

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>
Cornel
  • 72
  • 1
  • 7
  • Please note I've edited my question to make it more clear what I'm trying to do. I've tried this method of centering elements already, but I haven't been able to figure out how I can proportionally scale the image up and down by a scaling factor while maintaining the behavior I need. – Bri Bri May 28 '18 at 23:54
  • I was able to use this method if I manually set the width / height property of the image rather than using transform. – Bri Bri Jun 03 '18 at 23:45