Позиционирование изображения одинаково во всех разрешениях

Question

У меня здесь довольно сложная ситуация (по крайней мере, сложная для меня). Приложил скрипку, чтобы показать, как я пытался это сделать.

Я хотел разместить речевой пузырь в центре черной линии желтого изображения. (показано на скрипке).

Кроме того, когда я спускаюсь к более мелким устройствам, текст течет под речевым пузырем. (вы можете изменить размер окна и посмотреть)

Все они должны быть указаны со значением высоты 100 vh, пользователям не нужно прокручивать, чтобы увидеть пузырь, а также изображение.

Fiddle Link to show what I was doing

<div class="container" id="about_container"> 
    <div class="row" id="row_about_1"> 
     <div class="col-lg-2 col-md-2 col-xs-2 col-sm-2"></div> 

     <div class="col-lg-8 col-md-8 col-xs-8 col-sm-8 bubble"> 

      <div class="abt_txtcontainer"> 
       <p class="abt_maintext">Heading</p> 
       <p class="abt_subtxt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
       </p> 

       <p class="abt_maintext">Heading</p> 
       <p class="abt_subtxt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
       </p> 


       <p class="abt_maintext">Heading</p> 
       <p class="abt_subtxt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
       </p> 
      </div> 
     </div> 

     <div class="col-lg-2 col-md-2 col-xs-2 col-sm-2"></div> 
    </div> 

    <div class="row" id="row_about_2"> 
     <div class="col-lg-2"></div> 
     <div class="col-lg-8"> 
      <img src="http://i.imgur.com/5T5N5Vn.png" class="about_bg img-responsive"> 
     </div> 
     <div class="col-lg-2"></div> 

    </div> 


</div> 

Answer 1

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

.bubble { 
 
    position: relative; 
 
    z-index: 1; 
 
    /*width: 80%;*/ 
 
    height: auto; 
 
    /* margin-left:12.5%;*/ 
 
    padding: 5%; 
 
    background: #2e3c6f; 
 
    -webkit-border-radius: 15px; 
 
    -moz-border-radius: 15px; 
 
    border-radius: 15px; 
 
    color:darkgrey; 
 
} 
 

 
.bubble:after { 
 
    content: ''; 
 
    position: absolute; 
 
    border-style: solid; 
 
    border-width: 32px 21px 0; 
 
    border-color: #2e3c6f transparent; 
 
    display: block; 
 
    width: 0; 
 
    z-index: 1; 
 
    margin-left: -10.5px; 
 
    bottom: -32px; 
 
    left: 50%; 
 
} 
 

 
.about_bg { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
#about_container { 
 
    height: 100vh; 
 
    margin-top: 2.5%; 
 
} 
 

 
#row_about_1 { 
 
    height: 80vh; 
 
} 
 

 
#row_about_2 { 
 
    height: 20vh; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<div class="container" id="about_container"> 
 
    <div class="row" id="row_about_1"> 
 
    <div class="col-lg-2 col-md-2 col-xs-2 col-sm-2"></div> 
 

 
    <div class="col-lg-8 col-md-8 col-xs-8 col-sm-8 bubble"> 
 

 
     <div class="abt_txtcontainer"> 
 
     <p class="abt_maintext">Heading</p> 
 
     <p class="abt_subtxt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
 
     </p> 
 

 
     <p class="abt_maintext">Heading</p> 
 
     <p class="abt_subtxt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
 
     </p> 
 

 

 
     <p class="abt_maintext">Heading</p> 
 
     <p class="abt_subtxt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
 
     </p> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-lg-2 col-md-2 col-xs-2 col-sm-2"></div> 
 
    </div> 
 

 
    <div class="row" id="row_about_2"> 
 
    <div class="col-lg-2"></div> 
 
    <div class="col-lg-8"> 
 
     <img src="http://i.imgur.com/5T5N5Vn.png" class="about_bg img-responsive"> 
 
    </div> 
 
    <div class="col-lg-2"></div> 
 

 
    </div> 
 

 

 
</div>

Решение:

1) Для того, чтобы установить пузырь стрелка в центре: -> Добавлено положение Absol ute и левое значение 50%, затем добавлено левое поле 10,5% (это половина ширины стрелки)

2) Перекрывающий контент: -> Установите высоту автобазы (которая была на 80% ранее), теперь, когда вы «Измененный размер браузера не будет нарушен.

Answer 2

Возможно, вам захотелось больше раствора для жидкости, но со средствами массовой информации вы можете настроить размер изображения и положение пузырька снизу на больших экранах. Просто добавьте еще один шаг, например. на экранах> 1200px. Чтобы избежать переполнения я бы держать мин-высота контейнера ...

.about-container { 
 
\t height: 100vh; 
 
\t min-height: 580px; 
 
} 
 

 
.about-container .wrap { 
 
\t position: relative; 
 
\t height: 100%; 
 
} 
 

 
.bubble { 
 
\t background: #2e3c6f; 
 
\t color: #fff; 
 
\t position: absolute !important; 
 
\t bottom: 150px; 
 
\t left: 0; 
 
\t padding: 30px; 
 
\t border-radius: 15px; 
 
\t z-index: 1; 
 
} 
 

 
.bubble:after { 
 
\t position: absolute; 
 
\t content: ''; 
 
\t top: 100%; 
 
\t left: 50%; 
 
\t height: 0; 
 
\t width: 0; 
 
\t border: solid transparent; 
 
\t border-top-color: #2e3c6f; 
 
\t border-width: 30px; 
 
\t margin-left: -30px; 
 
} 
 

 
p:last-child { 
 
\t margin-bottom: 0; 
 
} 
 

 
.about-img { 
 
\t position: absolute; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t right: 0; 
 
\t margin: 0 auto; 
 
\t max-width: 320px; 
 
\t height: auto; 
 
}

<html> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <body> 
 
    <div class="container about-container"> 
 
     <div class="wrap"> 
 
     <div class="col-xs-12 col-md-8 col-md-offset-2 bubble"> 
 
      <p>Heading</p> 
 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </p> 
 
      <p>Heading</p> 
 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p> 
 
      <p>Heading</p> 
 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </p> 
 
     </div> 
 
     <img src="http://i.imgur.com/5T5N5Vn.png" class="about-img"> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>