img在div中不按百分比调整大小
16lz
2021-01-22
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.
如果我删除div,那么它会完美地调整大小。
What do I need to do to make it resize correctly even inside the div?
即使在div内,我还需要做些什么才能正确调整大小?
Thanks
1 个解决方案
#1
2
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的大小的40%,但你的div是空的并且没有指定大小,这意味着默认情况下你的div的大小将设置为auto(意味着它将根据内容调整大小)。这就是图像不调整大小的原因,请执行以下操作:
<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>
更多相关文章
- 如何在网站中找到未使用的图像和CSS样式?
- 如何在CSS中添加旋转图像?
- 样式Bootstrap的btn-group-justified,添加边距和垂直大小
- 如何在离子框架中显示图像标题?
- 为什么我的html页面的大小不固定啊?
- 将图像从本地上传到tinyMCE
- 嵌入的图像在签名中不显示。
- 性能权衡 - CSS效率,CSS文件大小,HTML文件大小
- html文件上传到vss上面后文件大小改变