Css 我试图用图像填充行的一列

发布于05月07日

我试图用图像填充使用 bootstrap 程序创建的行中的一列.我希望图像与行的高度相同，并将图像中不适合宽度的部分剪掉.然而，图像要么适合列的宽度，而其下方是空的，要么甚至比整个表还要大(如果您可以这么称呼的话).

我try 了高度100%和对象适合:封面，但没有任何效果.

问题出在第一列(忽略其他列).

.hotel-box {
  border: 1px solid gray;
  border-radius: 16px;
  width: 40%;
  margin: 50px 0;
}

.hotel-box img {
  height: 100%;
  object-fit: cover;
}

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">


<!-- Body -->
<div class="hotel-box">
  <div class="row">
    <div class="col-4">
      <img src="https://cf.bstatic.com/xdata/images/hotel/max1024x768/279134335.jpg?k=341488f6f4dc7bc8d6232b06730e304ed655bd4a944b1a90eb2ab81ac92a0568&o=&hp=1" alt="">
    </div>
    <div class="col-5">
      <h3>Hotel name</h3>
      <p>some info</p>
      <p>room info</p>
      <p>extra info</p>
    </div>
    <div class="col-3">
      <h4>word rating</h4>
      <p>number reviews</p>
      <span>number rating</span>
      <span>BGN price</span>
      <p>per night per person(под числото с дребен шрифт)</p>
    </div>
  </div>
</div>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">  <div class="hotel-box"> <div class="row"> <div class="col-4 image-col" style='background-image: url("https://cf.bstatic.com/xdata/images/hotel/max1024x768/279134335.jpg?k=341488f6f4dc7bc8d6232b06730e304ed655bd4a944b1a90eb2ab81ac92a0568&o=&hp=1");' alt=""> </div> <div class="col-5"> <h3>Hotel name</h3> <p>some info</p> <p>room info</p> <p>extra info</p> </div> <div class="col-3"> <h4>word rating</h4> <p>number reviews</p> <span>number rating</span> <span>BGN price</span> <p>per night per person(под числото с дребен шрифт)</p> </div> </div> </div>

Css 我试图用图像填充行的一列

推荐答案

Css相关问答推荐

在React中使用Tailwind自定义组件着色

自定义kendo色彩 Select 器中的清晰按钮

如何在移动屏幕尺寸上包装元素？

使用间距时奇怪的MUI网格行为

输入中的框始终显示在MUI文本字段中

Next.js中的TailWind CSS类名称疑难解答

下拉菜单未展开- bootstrap

如何在不使用 sx props 的情况下从 Select 样式中定位 mui paper 组件？

具有共享的自动调整列宽的多个 CSS 网格

我怎样才能准确地获得虚构文本内容宽度的边距？

如何更改导航栏标题中链接的文本 colored颜色和导航丸中的链接(在shiny 的应用程序中)？

如何在变量中插入 SCSS 变量？

对 CSS 容器查询使用多个条件

在活动状态下更改按钮的外观

为什么 em 不将定义的字体大小加倍？

无法更改 div 内链接的悬停 colored颜色

Angular 导航栏问题

如何通过 JavaScript 重新触发 WebKit CSS 动画？

将 webkit 滚动条样式应用于指定元素

对象拟合不影响图像