为什么img / svg会逃避父容器？

Question

在上面这张图片中，我选择了应该包含svg的容器（svg的尺寸是300x150，而父div的尺寸是50x50）。但是，我原本期望svg至少变得更小以适应父div，而不是只是挂出它，就像我看到当我尝试将鼠标悬停在DOM中的元素上时，如上图所示。

这种情况经常发生，我想知道这种情况背后是否存在资源/理论？

对，对，让我们看看，代码，我有点认为这是常见的事情。这是该特定部分的html和css：

HTML：

    <section>
<h3 id="about-me">About Myself</h3>

<div class="face-lockup">
    <div class="face-img">

    </div>
    <div class="icon-pencil">{% include icons/icon-pencil.html %}</div>
    <div class="icon-mouse">{% include icons/icon-mouse.html %}</div>
    <div class="icon-browser">{% include icons/icon-browser.html %}</div>
    <div class="icon-video">{% include icons/icon-video.html %}</div>

</div>
<div class="blurb">
    {{ site.data.portfolio.blurb %}}
</div>

<div class="skill-lockup">

{% for skill in site.data.portfolio.skills %}

    <div class="skill-unit">
        <div class="skill-label"> {{  skill.name }}</div>
        <div class="skill-icons skill-{{ skill.value }}">
            <span></span><span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span><span></span>
        </div>
    </div>
{% endfor %}

</div> </section>

CSS：

    .alt-section
background: $bgcolor

    .thumb-container
max-width: 960px
margin: 0px auto
padding-bottom: 100px
+clearfix

.thumb-unit
    display: block
    width: 25%
    // height: 150px
    background-color: pink
    float: left
    position: relative
    padding-top: 16%
    overflow: hidden

    @media screen and (max-width: 760px)
        width: 50%
        padding-top: 26%

    background:
        position: center center
        repeat: no-repeat
        size: cover

    .thumb-overlay
        +position(absolute, 100% 0px 0px 0px)
        height: 100%
        background: fade-out($accent, 0.5)
        text-align: center
        +transition
        +display(flex)
        +align-items(center)
        +justify-content(space-around)

        strong
            display: block
            padding: 0 20px
            color: white
            font-weight: 300
            text-transform: uppercase
            font-size: 24px
            line-height: 1.2
            padding-bottom: 0px



    &:hover .thumb-overlay
        +position(absolute, 0% 0px null 0px)