gpt4 book ai didi

html - 垂直对齐 svg 内的图像

转载 作者:行者123 更新时间:2023-11-28 14:59:01 24 4
gpt4 key购买 nike

如何在 svg 中垂直对齐图像?

我看到了this它没有帮助。从the jsfiddle可以看出尝试 dominant-baseline: central; 不起作用或者我做错了什么。

如有任何帮助,我们将不胜感激。

代码:

<svg style="background-color:#f1fe96; border: 1px black solid;">
<image href="https://media.istockphoto.com/photos/plant-growing-picture-id510222832" width ="50" height = "50" style="dominant-baseline: central;"/>

</svg>

最佳答案

将图像的高度设置为 100%(或您希望图像居中的任何高度)并另外设置属性 preserveAspectRatio="xMidYMid meet"

<svg style="background-color:#f1fe96; border: 1px black solid;">

<image href="https://media.istockphoto.com/photos/plant-growing-picture-id510222832" width="50" height="100%" preserveAspectRatio="xMidYMid meet"/>

</svg>

关于html - 垂直对齐 svg 内的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50555604/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com