Make div grow up left instead of down right - html

Question

The div should grow up left, however, it does the opposite as of now.
The margin-left and top is necessary by the way.
Quick gif showcasing the issue: https://gyazo.com/ce51c504698395c26cffefb9b74e7e3e
html, body {
width: 100%;
height: 100%;
}
#a {
width: 50%;
height: 100%;
border: 1px solid black;
}
#img-wrapper {
margin-left: 10%;
margin-top: 20%;
width: 50%;
position: relative;
border: 1px solid red;
}
img {
width: 100%;
}
<div id="a">
<div id="img-wrapper">
<img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12225358/Pug-On-White-01.jpg" alt="">
</div>
</div>

Answer 1

Try this:-
#a {
width: 70%;
height: 100%;
border: 1px solid black;
position: relative;
}
#img-wrapper {
width: 40%;
position: absolute;
bottom: 0;
right: 0;
border: 1px solid red;
}

Answer 2

If you want your image going from right to left by increasing width property, you should give it float property:
#img-wrapper {
float: right;
margin-top: 0; // if you want it to start from top right edge
}

Answer 3

added margin-right: 10%; float: right;
#img-wrapper {
margin-right: 10%;
margin-top: 20%;
width: 50%;
position: relative;
border: 1px solid red;
float: right;
}
html,
body {
width: 100%;
height: 100%;
}
#a {
width: 50%;
height: 100%;
border: 1px solid black;
position: relative;
}
#img-wrapper {
margin-right: 10%;
margin-top: 20%;
width: 52%;
position: absolute;
border: 1px solid red;
right: 0;
bottom: 50%;
transform: translateY(50%);
}
img {
width: 100%;
}
<div id="a">
<div id="img-wrapper">
<img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12225358/Pug-On-White-01.jpg" alt="">
</div>
</div>

Answer 4

Sounds like the problem isn't about getting the image to "grow up left" but is about positioning the #img-wrapper.
You can solve this by positioning the #img-wrapper absolutely and specifying its bottom and right position. I've added a :hover style so you can see it 'grow' on hover.
A word of warning though. Positioning something of unknown/variable size using percentages is going to give you very mixed results at different viewport sizes. Perhaps what you want isn't quite as described but I think you should be looking at a more flexible solution such as using flexbox.
html, body {
width: 100%;
height: 100%;
}
#a {
width: 50%;
height: 100%;
border: 1px solid black;
position:relative;
}
#img-wrapper {
right: 30%;
bottom: 30%;
width: 50%;
position: absolute;
border: 1px solid red;
}
#img-wrapper:hover {
width: 70%;
}
img {
width: 100%;
}
<div id="a">
<div id="img-wrapper">
<img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12225358/Pug-On-White-01.jpg" alt="">
</div>
</div>

Answer 5

html, body {
width: 100%;
height: 100%;
}
#a {
width: 50%;
height: 100%;
border: 1px solid black;
position: relative;
}
#img-wrapper {
width: 50%;
border: 1px solid red;
margin: 20% 0 0 20%;
position: absolute;
top:0;
left:50%;
transform: translateX(-50%);
}
img {
width: 100%;
}