我已经尝试过宽度100%,但是它没有响应。这是我尝试做出响应的链接。它没有响应。帮助codepen link



div {
  background:url(https://i.stack.imgur.com/EinaJ.png) top center;
  width:620px;
  margin:auto;
  padding:40px 40px 30px;
  height:590px;
  position:relative;
  display:flex;
  flex-flow:column;
  justify-content:center;
}
img, p, footer {
  padding:5px;
  margin:0;
  background:pink
}
img {
  margin:auto auto 0;
}
footer {
  bottom:30px;
  right:45px;
  margin:auto 0 0;
  border-radius:0 0 0.25em 0.25em ;
  background:rgba(0,0,0,0.2);
}

<div>
  <img src="">
  <p>here is</p>
  <footer>footer</footer>
</div>

最佳答案

:root {
  /*the percentage of screen width occupied by a block. 1 = 100% */
  --percent: .9;
}

div {
  background: url(https://i.stack.imgur.com/EinaJ.png) top center;
    background-size: cover;
    /* for old browsers */
    width: 90vw;
    height: 113.61516034vw;
    /* for new browsers */
    width: calc(100vw*var(--percent));
    height: calc((100vw*var(--percent))*866/686);
    box-sizing: border-box;
  margin: auto;
  padding: 40px 40px 30px;
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: center;
}

img,
p,
footer {
  padding: 5px;
  margin: 0;
  /* see me */
  background: pink
}

img {
  margin: auto auto 0;
}

footer {
  bottom: 30px;
  right: 45px;
  margin: auto 0 0;
  border-radius: 0 0 0.25em 0.25em;
  /* see me */
  background: rgba(0, 0, 0, 0.2);
}

body {
  background: #777;
}

<div>
  <img src="http://lorempixel.com/200/150" />
  <p>here is</p>
  <p>some line</p>
  <p>of</p>
  <p>text</p>
  <footer>footer</footer>
</div>

09-10 12:24
查看更多