时间戳

首页 > 解决方案 > div填充图像引导css

html - div填充图像引导css

问题描述

我有一个分成两部分的 div，在左侧我放了一个图像，但图像不会填满整个空间。怎么能填，如果你能看到两边有一个空间。我使用引导程序，但 css 中的任何解决方案也都是完美的。

         <div
            class="shadow-box d-flex flex-row overflow-hidden"
            style="height: 205px"
          >
            <div class="col-4 overflow-hidden">
              <img src="../../assets/img/bav1.png" alt="" class="h-100" />
            </div>
            <div class="col-8 p-4">
              <div class="col-10">
                <p class="font-TolyerBold1 fs-24 fs-md-26">
                  Como Mejorar mi Bienestar
                </p>
              </div>
              <p class="fs-12 fs-md-14">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Iusto debitis ullam sunt repellat nobis
              </p>
            </div>
            <img
              src="../../assets/img/iconork.png"
              alt=""
              class="tag p-3 p-md-4"
            />
          </div>

在此处输入图像描述

标签： htmlcssbootstrap-4

解决方案

如果我正确理解你想要什么，你可以离开图像的宽度和高度属性以保持纵横比并使用 flexbox 为你做居中。

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}
<div class="fill">
    <img src="https://picsum.photos/id/237/320/240" alt="" />
</div>

我在 IE9、Chrome 31 和 Opera 18 上测试成功。但没有测试其他浏览器。与往常一样，您必须考虑您的特定支持要求。

这有效，但可能不适用于您的情况：

img {
   object-fit: cover;
   width: 50px;
   height: 100px;
}

推荐阅读