Bug 40621 – Flex box and centering image

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: CSS

[Erik Arvidsson]

Given a flex box with a centered image in it. The image is centered using box-align: center and box-pack: center. The image itself has a max-width and max-height so that it gets resized when the available size is not big enough.

<div id=a>
  <img id=b src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg">
</div>

<style>

#a {
  position: absolute;
  top: 0;
  left:0;
  right:0;
  bottom: 0;
  display: -webkit-box;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  pointer-events: none;
}

#b {
  opacity: .8;
  max-width: 100%;
  max-height: 100%;
}
</style>

http://www.plexode.com/cgi-bin/eval3.py#ht=%3Cdiv%20id%3Da%3E%0A%20%20%3Cimg%20id%3Db%20src%3D%22http%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2F2%2F22%2FTurkish_Van_Cat.jpg%22%3E%0A%3C%2Fdiv%3E%0A%0A%3Cstyle%3E%0A%0A%23a%20%7B%0A%20%20position%3A%20absolute%3B%0A%20%20top%3A%200%3B%0A%20%20left%3A0%3B%0A%20%20right%3A0%3B%0A%20%20bottom%3A%200%3B%0A%20%20display%3A%20-webkit-box%3B%0A%20%20-webkit-box-align%3A%20center%3B%0A%20%20-webkit-box-pack%3A%20center%3B%0A%20%20pointer-events%3A%20none%3B%0A%7D%0A%0A%23b%20%7B%0A%20%20opacity%3A%20.8%3B%0A%20%20max-width%3A%20100%25%3B%0A%20%20max-height%3A%20100%25%3B%0A%7D%0A%3C%2Fstyle%3E&ohh=1&ohj=1&jt=&ojh=1&ojj=1&ms=100&oth=0&otj=0&cex=1


Try resizing the window and notice how the size and position of the image is incorrect.

[Tony Chang]

*** This bug has been marked as a duplicate of bug 54340 ***