调整和图像大小适合div(bootstrap)

我正在尝试使图像适合特定大小的div.不幸的是,图像不符合它,而是按比例缩小到不够大的尺寸.我不确定最好的方法是让图像适合它.

如果这不是足够的代码,我会乐意提供更多代码,并且我愿意修复我忽略的任何其他错误.

这是HTML

  
        

          

              
          
        
            

              

                  heres the name
            
            
          

              

                  heres where i describe and say "read more"
            
            


      

我的CSS

.top1{

    height:390px;
    background-color:#FFFFFF;
    margin-top:10px;


}

.food1{

background-color:#000000;
height:230px;


}

.name1{

background-color:#555555;
height:90px;

}

.description1{

background-color:#777777;
height:70px;


}

Shafeeque S.. 151

试试这种方式:

更新:

在自举4 img-responsive变img-fluid,因此,使用自举4的解决办法是:

它现在是"img-fluid",而不是"img-responsive" (25认同)

凉!class ="img-responsive"帮助.也许这应该是今天接受的答案. (5认同)

这实际上是正确的bootstrap方法. (2认同)

---

jterry.. 54

您可以明确定义图像width和height图像,但结果可能不是最好看的.

.food1 img {
    width:100%;
    height: 230px;
}

的jsfiddle

---

...根据你的评论,你也可以阻止任何overflow- 看到这个例子看到一个受高度限制的图像并切断,因为它太宽了.

.top1 {
    height:390px;
    background-color:#FFFFFF;
    margin-top:10px;
    overflow: hidden;
}

.top1 img {
    height:100%;
}

---

小智.. 45

只是现在使用Bootstrap 4 img-fluid代替的img-responsive,所以如果你遇到问题,请仔细检查你正在使用哪个版本.

1> Shafeeque S..：

---

试试这种方式:

更新:

在自举4 img-responsive变img-fluid,因此,使用自举4的解决办法是:

---

它现在是"img-fluid",而不是"img-responsive"

---

凉!class ="img-responsive"帮助.也许这应该是今天接受的答案.

---

这实际上是正确的bootstrap方法.

2> jterry..：

---

您可以明确定义图像width和height图像,但结果可能不是最好看的.

.food1 img {
    width:100%;
    height: 230px;
}

的jsfiddle

---

...根据你的评论,你也可以阻止任何overflow- 看到这个例子看到一个受高度限制的图像并切断,因为它太宽了.

.top1 {
    height:390px;
    background-color:#FFFFFF;
    margin-top:10px;
    overflow: hidden;
}

.top1 img {
    height:100%;
}

3> 小智..：

---

只是现在使用Bootstrap 4 img-fluid代替的img-responsive,所以如果你遇到问题,请仔细检查你正在使用哪个版本.

---

`img-fluid`做到了!谢谢 !

4> Shashi..：

---

只需将类添加img-responsive到您的img标记中,它就适用于bootstrap 3以后!

5> 小智..：

---

我遇到了同样的问题,偶然发现了以下简单的解决方案.只需在图像中添加一些填充,它就会自行调整大小以适应div.