0

I'm quite bad at CSS, been spending the past hour fiddling to get an responsive image to align to center bottom of the page. This doesn't really do it, but it's one iteration out of many. The ones that get close are more frustrating, since it looks right until you resize it.

body{
  width:100%;
  height:100%;
}
.flexbox{
    display:flex;
  justify-content:center;
  align-items:flex-end; 
}
.alignbottomcenter{
  width:50%;height:50%;
  max-width:50%;max-height:50%;
  display:flex;
  justify-content:center;
  align-items:flex-end; 
  
}
ina
  • 19,167
  • 39
  • 122
  • 201
  • Trying to apply flex to the image itself makes rather little sense, you won’t be able to center it based on that. You need to stick it into a flex container. – CBroe Feb 24 '21 at 07:14
  • @CBroe like this? https://jsfiddle.net/yosun/78L140zs/3/ ... it centers but does not align to the bottom of page – ina Feb 24 '21 at 07:17
  • 2
    It doesn’t, because the flex container is no higher than the image itself. You would need to set that to 100%, too - and then not only body, but html as well (a height in percent only works, if the immediate parent also has an explicit height.) Easier if you don’t use percent, but `100vh` instead; that one you would need to apply to the `.flexbox` wrapper only here, https://jsfiddle.net/7ghpz60v/ – CBroe Feb 24 '21 at 07:22
  • What if the image is larger and needs to be made responsive? – ina Feb 24 '21 at 08:11
  • 1
    You can still set max-width/-height, or whatever you need, for the `img` element itself. – CBroe Feb 24 '21 at 08:13
  • ah interesting... so if you also have a link around the image, do you just flex box it twice? https://jsfiddle.net/yosun/j8furbqx/4/ – ina Feb 24 '21 at 08:15
  • With that in particular, the link itself is also 100%/100vh high now, so the clickable area extends above the image itself, not sure if that’s what you wanted to achieve here. – CBroe Feb 24 '21 at 08:18
  • hmmm how to fix this? – ina Feb 24 '21 at 23:23
  • Could f.e. make the link not flexbox, give it 50% height, and the image inside it 100% - https://jsfiddle.net/1ehsgv97/ – CBroe Feb 25 '21 at 07:31

1 Answers1

-1

you can add height: 100vh; to the .flexbox or whatever container your image is inside of.

in order to align the img to bottom . it must be positioned as absolute or fixed . it's parent must be stretched as full height

sinawic
  • 157
  • 3
  • 14