调整和图像大小以适合div（引导程序） [英] Adjusting and image Size to fit a div (bootstrap)

问题描述

我想要得到一个图像适合特定的大小div。不幸的是，图像不符合它，而是成比例地缩小到不够大的尺寸。我不知道什么最好的方式是获得图像适合内部是。

I'm trying to get an image to fit within a specific size div. Unfortunately, the image isn't conforming to it and is instead proportionally shrinking to a size that isn't big enough. I'm not sure what the best way is to go about getting the image to fit inside it is.

如果这是不够的代码，我很乐意提供更多，我可以修复任何其他错误，我可以俯瞰。

If this isn't enough code, I'd be happy to supply more, and I'm open to fixing any other errors that I am overlooking.

这里是HTML

<div class="span3 top1">  
        <div class="row">
          <div class="span3 food1">
              <img src="images/food1.jpg" alt="">
          </div>
        </div>
            <div class="row">
              <div class="span3 name1">
                  heres the name
            </div>
            </div>
          <div class="row">
              <div class="span3 description1">
                  heres where i describe and say "read more"
            </div>
            </div>


      </div>

我的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;


}

推荐答案

您可以明确定义图像的 width 和 height ，但结果可能不是最好的。 / p>

You can explicitly define the width and height of images, but the results may not be the best looking.

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

jsFiddle

jsFiddle

...根据您的评论也可以阻止任何溢出 - 请参阅此示例查看图片受高度限制，因为太宽而被切断。

...per your comment, you could also just block any overflow - see this example to see an image restricted by height and cut off because it's too wide.

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

.top1 img {
    height:100%;
}

这篇关于调整和图像大小以适合div（引导程序）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！