这是CSS‘压扁’我的形象吗？

Question

我有下面的CSS和当我把一个图像到网站的品牌，它挤压该形象，我不知道为什么？！我是个新手，我希望有人能在这里发现一些引起问题的东西？

.site-branding {
    position: relative;
    padding-top: 10px;

    &:before {
        content: "";
        position: absolute;
        height: 100px;
        width: 100vw;
        top: 0;
        right: -1px;
        background: $green;
    }

    &:after {
        content: "";
        position: absolute;
        border-right: 50px solid transparent;
        border-bottom: 100px solid transparent;
        border-left: 50px solid $green;
        height: 0;
        width: 0;
        right: -100px;
        top: 0;
    }

    a {
        position: relative;
        z-index: 1;
    }
}


<header class="site-header" role="banner"> 
  <div class="row"> 
    <div class="columns-2 site-branding"> 
    <a href="homepage.html" title="Homepage" rel="Home"> 
      <center><img src="images/Logo.png" alt="logo"/></center> 
    </a> 
  </div>

Answer 1

是。CSS可能会压碎你的图像。

这两条规则意味着高度始终为100 of，宽度始终为视图端口宽度的100%。

    height: 100px;
    width: 100vw;

你可能是说

    height: 100px;
    max-width: 100vw;

这意味着图像不应该超过100%的宽度，但它允许图像与100 to高度成比例。