用于徽标图像边框的响应式 HTML

Question

我需要制作附加设计的响应式布局，请帮忙。

注意事项：

1. 无法固定徽标图像或任何 div 的高度/宽度，它必须是动态的
2. 边框线和图片之间的 5px 内边距。

谢谢！

.width100per {
  max-width:1100px;
  width:100%;
  height:1000px;
  text-align:center;
  margin: 0px auto;
  background-color: #808080;
}

.container { 
  width:100%;
  float:left;
}

.container::after {
  content: " ";
  border-bottom:red 2px solid;
  width: 100%;
  float: left;
  position: absolute;
  top: 24%;
  left: 0;
  z-index: 10;
}


header {
  float: left;
  width: 100%;
}

header .logo {
  float:left;
  width:20%;
  height:100%;
  background-color:#000;
  position: relative;
  z-index: 20;
}

header .logo img{
  width: 100%;
}

<div class="width100per">
  <div class="container"></div>
    <header>
      <div class="logo">
          <img src="jessicarose.nordicfinest.com/static/home_333333.png">
      </div>
    </header>
</div>

Answer 1

将此代码添加到您的 css 中

header:after{
    content: " ";
    border-bottom: red 2px solid;
    width: 100%;
    float: left;
    position: absolute;
    bottom: -2px;
    left: 0;
    z-index: 10;
}

header{
position:relative;
}
.container::after {
display:none;
}

Answer 2

    <div class="width100per">
      <header>
          <div class="logo">
              <img src="jessicarose.nordicfinest.com/static/home_333333.png">
          </div>
      </header>
    </div>

    /* Css  */

header {
  float: left;
  width: 100%;
  padding-left: 20%;
  position: relative;
}

header .logo {
  float:left;
  width:20%;
  height:calc(100% + 10px);
  height:-moz-calc(100% + 10px);
  height:-webkit-calc(100% + 10px);
  background-color:#000;
  position: absolute;
  background-color:#000;
  padding: 5px;
  z-index: 20;
  top: 0;
  left: 0;
  text-align: center;
}
header .logo img{
  padding-top: 20px;
  display:inline-block;     
  float: none;
  max-width: 100%;
}