在div中不按百分比调整大小

Question

我有这段代码，但图像保持其原始大小。

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

如果我删除div，那么它会完美地调整大小。

我需要做什么才能使它正确地调整大小，甚至在div内?

谢谢

Answer 1

该图像应该占用div大小的40%，但是您的div是空的，并且没有指定大小，这意味着默认情况下您的div的大小将设置为auto(意味着它将根据内容调整大小)。这就是为什么图像不能调整大小，这样做:

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

下面是一个示例:

<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>