html - Logo 图像周围边框的响应式 HTML

Question

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

注意事项:

1. 不能固定 Logo 图像或任何 div 的高度/宽度，它必须是动态的
2. 边框线和图像之间有 5 像素的内边距。

谢谢!

.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;
}