Question

我尝试过宽度100％，但它并没有让它响应。这是我尝试做出回应的链接。它没有响应。帮助codepen link

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

这是没有响应的原因是因为您已将div的宽度和高度设置为特定像素。因此无法调整。

尝试将像素更改为百分比：

例如：

width: 50%;
height: 100%;

Answer 2

我看到你正在尝试做什么。你正试图让div位于中间位置并做出响应。设置margin:0 auto;和width:50%;。摆脱其他位div中的代码。使其响应移动屏幕：

@media only screen and (max-width:set_your_max){
    div { width:50%; }
}

Answer 3

＆＃13;

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

＆＃13;

<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>

＆＃13;

使这个div响应

3 个答案: