css - 重叠的容器

Question

因此，我尝试在我的 yii2 元素中使用 bootstrap 4.1 主题。问题是，它使我的容器重叠了一半的宽度。我使用的类来自 Bootstrap 。 有问题的图片:https://imgur.com/q0O9jhK 我的代码和类(class):

 <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

Answer 1

改变这个:

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

进入这个:

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

第一个代码包含无效的 CSS。该代码还设置了一个固定高度，而您需要一个动态高度，因为 bootstrap 不提供固定宽度的容器。改进后的代码将宽度设置为“100%”，将高度设置为符合纵横比的值(“自动”)。图像的最大宽度是“200px”(是的......试着绕过它)。

'width' 表示图像宽度应为 '200px'，但 'max-width' 值表示图像不能大于第一个定位父级(在本例中为列)的 '100%' .因此它可以在“400px”列中为“200px”，但在“133px”列中为“133px”。

希望这对您有所帮助!