CODEWITHSUNDEEP
javascripthtmlcss
Rage Gamer
Rage Gamer

Reputation: 33

Prevent Image from resizing div

I have tried to edit the parent divs and the image itself using css such as overflow: hidden, Object-fit: contain, max-height: 100%; max-width: 100%;. What does work with my code is making the image a background image for the pic div and setting it to contain. Is there something I am missing on how to have the image inside the div without making it expand past the parent div? From my understanding it has to do with me using flexbox, probably wrong, with the name div making the contain div extend further down.

function start(){
  var aa = document.getElementById("name");
  var ab = document.getElementById("charname");
  var ac = document.getElementById("prefs");
  var ad = document.getElementById("sliders-clearfix");
  var ae = document.getElementById("pref-sliders");
  aa.append(ab);
  ac.append(ad, ae);
}
html, body, .profile {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  display: flex;
  box-sizing: border-box;
  flex-flow: column;
  border: 5px inset blue;
}
div {
  display: flex;
}
.border{border: 5px inset blue;}
img {max-width: 100%; max-height: 100%;}
#name{width: 100%;}
#contain{height: 100%; width: 100%; flex-flow: row;}
#pic {height: 100%; width: 50%;}
#content{height: 100%; width: 50%;}
<html>
<body>
<h1 id="charname">Rage</h1>
<div class="profile">
<div id="name" class="border">
</div>
<div id="contain" class="border">
  <div id="pic" class="border">
    <img onload="start()" src="https://i.imgur.com/6LRFBk8.png">
  </div>
  <div id="content" class="border">
    <div id="prefs" class="border">
    </div>
  </div>
</div>
</div>
<div id="sliders-clearfix" class="clearfix"></div>
<div id="pref-sliders" class="show-p-only"></div>
</body>
</html>

Upvotes: 3

Views: 1919

Answers (1)

Amin Darian
Amin Darian

Reputation: 187

Give the parent div a px or rem or vh for height instead of percentage. Thats it.

.border { border: 5px inset blue; height: 200px !important; }

Upvotes: 1

Related Questions