css - 超过 div 大小的图像

Question

我创建了一个标题 div，如下所示:

<div class="header">        
    <div class="row">           
        <div class="col-lg-2 col-sm-2 col-xs-2 col-md-2">
            <img class="img-responsive" src="logo.png"/>                
        </div>          
    </div>    
</div>

这是标题类:

.header {
    background-color: #5DBCD2;
    height: 10%;
}

即使 div 的最大高度限制为 10%，图像也​​会超过此值。

有人可以帮忙吗

Answer 1

将以下内容添加到您的 CSS 中，以便您可以在 div 缩小时很好地包含图像。

.header img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

您也可以添加 overflow: hidden;到标题元素，但这会切断它而不是缩放它，但这是另一个潜在的选择。