响应格旗帜里面

Question

RESPONSIVE DIV包含图像内容和内容

我想有一个包含如图片所示，其上有内容（文字），背景图像的DIV。 div需要具有响应能力，并且图像必须保持100％，并且不管屏幕的大小如何，都能达到但不超过屏幕的框架。

问题是，当我缩小时，按下ctrl并向下滚动鼠标，图像会失去很多高度，而不是保持相同的高度。放大和缩小时，我如何使它不会丢失高度。

我用尽了一切，这是我有

enter code here 


     <div id="container"> 
      <div class="content-inner"> 
       <h1>HELLO!!</h1> 
       <hr> 
       <p>I HAVE A QUESTION AND WAS WONERING IF YOU CAN HELP?</p> 

      </div> 
     </div> 



<style> 
html, body{ 
margin:0; 
} 
#container { 
    position:relative; 
    border:1px solid red; 
    position: relative; 
    width: 100%; 
    min-height: auto; 
    text-align: center; 
    color: #fff; 

    background: radial-gradient(circle, rgba(17, 5, 19, 0.94), rgba(20, 7, 35, 0.78), rgb(0, 0, 0)), url(backgrounddark.png) no-repeat; 
    background-position: center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
      } 

#container .content-inner { 
    position: relative; 
    width: 50%; 
    padding: 100px 15px; 
    text-align: center; 
    margin:auto; 
         } 

#container .content-inner .content-inner h1 { 
    margin-top: 0; 
    margin-bottom: 0; 
    text-transform: uppercase; 
    font-weight: 700; 
} 

#container .content-inner .content-inner hr { 
    margin: 30px auto; 
} 

#container .content-inner .content-inner p { 
    margin-bottom: 50px; 
    font-size: 16px; 
    font-weight: 300; 
    color: rgba(255,255,255,.7); 
} 


</style> 

感谢

Answer 1

在你的代码没有为容器的高度最好，最小高度设置自动，这意味着它将扩展到div中包含的内容的大小。背景图片不被视为内容。

当缩小时，与字体大小和填充相比，屏幕尺寸更小，这使得div更小（内容越小，div高度越小）。

如果你希望能够缩小图像而不会变小（即使文本不变），我会建议设置div的高度。您可以使用vh单位将其设置为视口高度的百分比（请参阅此处以了解浏览器支持，这很不错，但我不知道您的场景：http://caniuse.com/#feat=viewport-units）。或者，您可以将#container上方的所有元素设置为具有100％的高度或最小高度，这将允许您为#container的height/min-height值使用百分比。

请注意，如果您使用动态高度，则文字将不会自动垂直居中，因此需要额外的CSS（请参阅Vertically align text in a div）。