Bootstrap 3 отклика в масштабе карты для разных размеров экрана - PullRequest
Новая
       34

Bootstrap 3 отклика в масштабе карты для разных размеров экрана

0 голосов
/ 21 июня 2020

Я создал карту размером Bootstrap 3 и установил для div class = "card-wide-image-wrap" минимальную ширину 50%. Это обеспечивает правильное отображение на моем ноутбуке (иначе не будет отображаться полное изображение с наложенным текстовым блоком). Однако минимальная ширина 50% для div искажает отображение карты на мобильном телефоне (изображения ниже). Есть ли способ исправить это?

Второй вопрос: для каждой строки текста, добавляемой справа, изображение слева кажется увеличенным. Можно ли каким-то образом отделить изображение от текстовой стороны карты, чтобы оно оставалось фиксированным?

Изображение ниже является желаемым результатом на ПК / большом экране. Я получаю это, когда устанавливаю минимальную ширину div на 50%.

PC_card-wide wanted result

However, as seen in image below, this does not show up well on a mobile phone: Mobile unwanted result If I omit the div min-width 50%, I get the following unwanted result on PCs/large screens:

PC unwanted result

However, it then displays correctly on a mobile device:

enter image description here

Here is my code. Thanks Ric:

 

 p {
 color: white;
 }

 h2.ex1 {

 padding-left: 30px;
 }

 ul.ex1 {

 padding-left: 60px;
 }

 p.ex1 {

 padding-left: 30px;
 }

 h6.ex2{

 font-size: 22px;
 }


 .text-block {
  position: absolute;
  bottom: 80px;
  right:370px;

  background-color: #292929;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
  block-size: max-content;

  }

  .cover {
  object-fit: cover;
  width: 10px;
  height: 10px;
  }


   div img{
   min-width:100%;
   min-height:100%;
   height:auto;
   position:relative;
   top:50%;
   left:50%;
   transform:translateY(-50%) translateX(-50%);
   }

   



   
 ураганы Naturkræfter  Cykloner i den nordlige og sydlige hemisfære, adskilt af kvator, hvor corioliskraften er 0, or derfor forhindrer hvirvelvindene i at formes og krydse kvatorlinjen    Lorem Ipsum  
Lorem ipsum dolor sit amet, conctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнения ullamco labouris nisi ut aliquip ex ea  
 Duis aute irure dolor in  Eprehenderit in voluptate velit esse cillum  Dolore eu fugiat nulla pariatur  Excepteur sint occaecat Cupidatat non proident  Csunt in culpa qui   
 Отправить запрос в ОС

1 Ответ

0 голосов
/ 21 июня 2020

Вы упомянули, что используете Bootstrap 3, но ваш тег img использует класс img-fluid, тогда как он должен использовать img-responsive class. 

<img alt="hurricanes" class="card-wide-image cover img-responsive" src="#">

Кроме того, я предполагаю, что ваш CSS определения для всей карты основаны на каком-то шаблоне? Bootstrap3 по своей сути не имеет карт и использует панели.

...