图片

图片-Bootstrap 5和Material Design 2.0

选择图像以响应行为的文档和示例(因此它们永远不会成为 大于其父元素),并通过类为它们添加轻量样式。


响应式图像

MDB中的图像通过 .img-fluid 进行响应。这适用 最大宽度:100%; height:自动; 与父元素。

...

          <img src="https://mdbootstrap.com/img/new/slides/041.webp" class="img-fluid" alt="..." />
        

缩图

除了我们的 边界半径实用程序, 您可以使用 .img-缩略图为图像提供1px的圆形边框外观。

...

          <img
            src="https://mdbootstrap.com/img/new/standard/city/041.webp"
            class="img-thumbnail"
            alt="..."
          />
        

暗影

通过使用我们的 影子班 您可以添加阴影 图片。在下面的示例中,我们添加了 shadow-2-strong 类。


          <img
            src="https://mdbootstrap.com/img/new/standard/city/042.webp"
            class="img-fluid shadow-2-strong"
            alt=""
          />
        

通过向元素添加 .hover-shadow 类,您可以应用阴影悬停效果。


          <img
            src="https://mdbootstrap.com/img/new/standard/city/043.webp"
            class="img-fluid hover-shadow"
            alt=""
          />
        

波纹

您可以将图像更改为可点击的元素并应用a 连锁反应 只需添加 .ripple 类。

example

          <a class="ripple" href="#!">
            <img
              alt="example"
              class="img-fluid rounded"
              src="https://mdbootstrap.com/img/new/standard/city/044.webp"
            />
          </a>
        

口罩

您可以用 遮罩以达到所需的对比度,并 例如,在其上放置文本。

Sample

Can you see me?


          <div class="bg-image">
            <img
              src="https://mdbootstrap.com/img/new/standard/city/053.webp"
              class="img-fluid"
              alt="Sample"
            />
            <div class="mask" style="background-color: rgba(0, 0, 0, 0.6)">
              <div class="d-flex justify-content-center align-items-center h-100">
                <p class="text-white mb-0">Can you see me?</p>
              </div>
            </div>
          </div>
        

悬停效果

通过使用 .hover-overlay 类,您可以应用柔和和装饰性的 悬停效果到图片。


          <div class="bg-image hover-overlay ripple">
            <img src="https://mdbootstrap.com/img/new/fluid/city/055.webp" class="img-fluid" />
            <a href="#!">
              <div class="mask" style="background-color: rgba(57, 192, 237, 0.2)"></div>
            </a>
          </div>
        

形状

通过使用边界实用程序,您可以更改 图像的形状。

.rounded
.rounded-circle
.rounded-pill

          <img
            src="https://mdbootstrap.com/img/new/standard/city/047.webp"
            class="img-fluid rounded"
            alt=""
          />

          <img
            src="https://mdbootstrap.com/img/new/standard/city/047.webp"
            class="img-fluid rounded-circle"
            alt=""
          />

          <img
            src="https://mdbootstrap.com/img/new/standard/city/047.webp"
            class="img-fluid rounded-pill"
            alt=""
          />