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

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

这是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;


}

推荐答案

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

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

100


根据您的 comments ,您也可以只发挡路Anyoverflow-viewthis example来查看因高度限制而被剪掉的图片,因为它太宽了.

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

.top1 img {
    height:100%;
}

Html相关问答推荐

将小文本放在输入字段的右侧

后续使用收件箱从网页表中提取值

我的表的第一列似乎是推其他2列到右边,我不能改变它

Chrome中是否有一个本地显示密码功能,用于`input type = password/`?""<"">

如何使div按钮链接到另一个网页

HTML5章节或文章

将弹性容器设置为内容宽度

具有可展开行的棱角material 表(垫子表),折叠时行之间仍有间隙

Bootstrap nav没有崩溃

仅在过渡之前删除填充

你将如何为手机制作导航栏

如何使链接组件内的内容不重新路由Next.js13

如何在CSS中延迟触发2个转换?

Angular MatBadge 在高于 99 时不显示完整数字

无法在 CSS 中将 h1 标签居中

网页爬虫:使用时光机器进行数据采集

如何为Vuetify输入控件减小标签和字段之间的间距?

将图像高度调整到容器 div 中而不使其高度增加

a with