CSS Адаптивное изображение «отображается полностью» на экране без растяжения с точным размещением текста

Question

<div class="container">
  <div class="fullscreen"> 
  
    <div class="textbox">Testing</div>
    
  </div>
</div>

Я пытаюсь, чтобы изображение полностью отображалось в зависимости от размера экрана, и чтобы текст («Тестирование» в классе текстового поля) отображался в точно обозначенной области изображения, как показано выше.

Пытаясь заставить вышеописанное работать с этим codepen , но я потерпел поражение, признав, что после часа возни с css я никуда не подхожу.

Довольно печально, что css не работает должным образом, когда изображение, похоже, не хочет вкладываться в полную высоту и т. Д. c.

Answer 1

Я хотел бы предложить, если вы добавите изображение с помощью тега img HTML, у вас будет лучший контроль над изображением в связи с текстом "Тестирование". Пожалуйста, проверьте ниже мой фрагмент. Вы можете отрегулировать позицию «Тестирование» с помощью позиции «top» в классе «.textbox»:

.container{
        min-height: 100%;
        margin: 0;  
        padding: 0;
      }
      .fullscreen{
        width: auto;
        height: 100%;
        margin: 0;
        padding: 0;
        position:relative;
      }

      .textbox{
        position:absolute;
        top:55%;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        z-index:3;
        text-align:center;
      }

<div class="container">
  <div class="fullscreen"> 
    <img src="http://print.drawmaticar.com/preview.jpg"   style="width:100%;"/>
  
    <div class="textbox">Testing</div>
    
  </div>
</div>

Answer 2

Обычно, если вы вызываете изображение в фоновом режиме, это означает, что необходимо добавить отступ в процентах. Это означает, что высота / ширина изображения * 100

css

.fullscreen {
 padding-bottom: 129.411%;
}

Answer 3

Backgorund Image

вам нужно сделать background-size:cover вместо 100% и сделать height:100vh, чтобы сделать его видимым.

Answer 4

Попробуйте это:

background: url('path/to/img.jpg') no-repeat center center / cover;