我已经尝试过宽度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>