Question

我正在尝试创建一个包含2个flex div框的部分：

左一：自动宽度为img。
右边一个：左边宽。

我几乎所有的东西都在工作，但我坚持这个：

似乎设置了SVG文件的原始宽度，而不是“缩放”的宽度。 SVG图片包含在img标记中，并使用height: 100%;和width: auto;进行缩放。

我一直在寻找互联网上的多种解决方案，但都没有。

有什么办法可以解决吗？（如果可能，不使用JavaScript）

的index.htm

<div id="SideMessage">
    <div class="Decoration">
        <img src="./image.svg" alt="ERROR">
    </div>
    <div class="Message">
        <span>SAMPLE TEXT</span>
    </div>
</div>

的style.css

div#SideMessage {
    /**/background: lightblue;
    display: flex;
    height: 64px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}
        div#SideMessage > div.Decoration {
            /**/border: 1px dashed green;
            flex-basis: auto;
            flex-grow: 0;
            flex-shrink: 0;
        }
        div#SideMessage > div.Message {
            /**/border: 1px dashed red;
            flex-basis: auto;
            flex-grow: 1;
            flex-shrink: 1;
        }
                div#SideMessage > div.Decoration > img {
                    height: 100%;
                    width: auto;
                }
                div#SideMessage > div.Message > span {
                    font-size: 20px;
                    letter-spacing: 2px;
                }

image.svg

<svg xmlns="http://www.w3.org/2000/svg" width="18.475px" height="32px" viewBox="0 0 18.475 32">
    <polygon fill="rgb(0, 0, 0)" points="0,0 18.475,0 0,32"/>
</svg>

Answer 1

2年后，但将<img>从<div class="Decoration">拆开应该会解决。并添加box-sizing: border-box;以防止其边框/填充溢出。

Flexbox使用原始SVG宽度而不是缩放宽度

1 个答案: