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;添加到标题元素，但这会将其删除而不是缩放它，但这是另一种可能的选择。

Answer 2

我不确定是否有任何帮助，但尝试在CSS中为图像添加 max-height 。

EDIT 您可以在CSS中添加它（以便图像具有父项宽度的10％）：

.img-responsive { width: 10%; }

Answer 3

我尝试使用2000 x 1522像素尺寸的图像进行编码。

工作得很好。

你可以做的事情很少：

1）使用浏览器中的开发人员工具调试您的页面。

2）检查您的css文件路径是否正确。

3）检查开发人员工具的控制台部分是否有任何错误。

Answer 4

在声明行之前的上面的代码引导程序中，你必须先声明容器，你应该在下面有这样的东西

<div class="header">
  <div class="container"> 
    <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>
</div>

可能这应该有效

超过div大小的图像

4 个答案: