0

I was struggling a lot with getting my images to fit inside their parent element. In order to ask a better StackOverflow question, I decided to makde a codepen, but when I did that, the issue was solved? it's still not solved when I run a local server though. Can anyone explain this?

Outer div:

.img-holder{
  opacity: .5;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  position: relative;
  max-width: 80vw;
  display: block;
  max-height: 80vh;
}

inside image:

  img {
  left: 50%;
  transform: translateX(-50%);
  position: relative;
  max-height: 80vh;
}

http://codepen.io/evejweinberg/pen/vgRNWR

EJW
  • 604
  • 2
  • 10
  • 22
  • Do you want something like this? http://codepen.io/justdan/pen/XpEmOp – justDan Feb 01 '17 at 16:29
  • One difference could be that CodePen is using standards mode and your standalone HTML page is using Quirks... – Mr Lister Feb 01 '17 at 16:31
  • @DanielD - two things that are un-ideal about your version are 1) images are stretched and 2) images go beyond the height of the tan canvas. – EJW Feb 01 '17 at 17:19

0 Answers0