CODEWITHSUNDEEP
htmlcssimage
b85411
b85411

Reputation: 10010

img not resizing by percentage when in div

I have this code but the image stays at its original size.

                <div style="margin: 10px; align: center;">
                    <img height="40%" src="data:image/jpeg;base64,{{ photo }}" />
                </div>

If I remove the div, then it resizes perfectly though.

What do I need to do to make it resize correctly even inside the div?

Thanks

Upvotes: 1

Views: 350

Answers (1)

Luthando Ntsekwa
Luthando Ntsekwa

Reputation: 4218

The image is suppose to take 40% of your div's size, but your div is empty and it does not have a size specified, this means by default your div's size will be set to auto(meaning it will resize based on content). thats why the image does not resize, do this: 

<div style="margin: 10px; align: center; width:500px; height:500px;">
            <img height="40%" src="data:image/jpeg;base64,{{ photo }}" />
            </div>

Here is a demo:

<div style="margin: 10px; align: center; width:500px; height:500px;">
    <img height="40%" src="http://www.cypresspa.com/images/img/home-1-bg-3.jpg" />
</div>

Upvotes: 2

Related Questions