Контейнеры, которые перекрываются - PullRequest
Новая
       7

Контейнеры, которые перекрываются

0 голосов
/ 17 сентября 2018

Итак, я попытался использовать тему начальной загрузки 4.1 в своем проекте yii2.Дело в том, что мои контейнеры перекрывали примерно половину их ширины.Классы, которые я использую, взяты из начальной загрузки.Изображение с проблемой: https://imgur.com/q0O9jhK Мой код и классы: 

 <div class="col-sm-6 col-lg-4" style="text-align:center;">
     <div class="thumbnail">          
         <div class="caption" style="align-items: center;">        
            <img style="width=200 height=300"><?=HtmlPurifier::process($model->thumnail)?></img>
            <h4 class="overme"><?=Html::encode ($model->title)?></h4>
            <p>
               <?=Html::a('More Informations', ['/library/books/detail', 'id' => $model->id], ['class'=>"btn btn-md
 btn-primary"])?>
            </p>
         </div>
     </div>
 </div>

Сайт и тема: https://bootswatch.com/cerulean/

Загрузочный код темы: https://bootswatch.com/4/cerulean/bootstrap.css

1 Ответ

0 голосов
/ 17 сентября 2018

Изменить это: 

<img style="width=200 height=300" src="..." />

На это: 

<img style="width: 200px; height: auto; max-width: 100%;" src="..." />

Первый код имеет недопустимый CSS.Код также устанавливает фиксированную высоту, в то время как вы хотите динамическую, поскольку загрузчик не обеспечивает контейнеры фиксированной ширины.Улучшенный код устанавливает ширину на «100%» и высоту на значение, которое учитывает соотношение сторон («авто»).Максимальная ширина изображения составляет 200 пикселей (да ... попробуйте обернуть голову вокруг этого).

«ширина» означает, что изображение должно иметь ширину «200 пикселей», а значение «максимальная ширина» говорит о том, что изображение не может быть больше, чем «100%» первого расположенного родителя (в данном случаеколонка).Следовательно, это может быть «200px» в столбце «400px», но это будет «133px» в столбце «133px».

Надеюсь, это поможет!

...