如何使用CSS或Bootstrap显示比容器更大的图像

f87krz0w 于 2023-04-27 发布在 Bootstrap

关注(0)|答案(1)|浏览(107)

我试图在一个深色容器内的文本左侧添加一张图片。但是，我希望图片从容器的底部开始，穿过容器的顶部。这样图片就出现在容器顶部之外。下面是我试图创建的草图。

这是我的代码

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
        
        <div class="container-fluid text-white bg-secondary py-5">
        
        </div>
        <div class="container-fluid text-white bg-dark">
               <div class="container">
                  <div class="d-flex flex-column-reverse flex-md-row justify-content-md-between">
                     <div class="">
                        <img src="http://clipart-library.com/images_k/person-transparent-background/person-transparent-background-16.png" alt="" class="img-fluid px-5" />
                     </div>

                     <div class="py-3 py-lg-5">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                        <a class="btn btn-primary" href="#">Click here</a>
                     </div>
                  </div>
               </div>
         </div>

我怎样才能迫使图像显示出它的黑暗容器的一面？

twitter-bootstrap

来源：https://stackoverflow.com/questions/76081350/how-to-show-an-image-larger-that-its-container-using-css-or-bootstrap

1条答案

按热度按时间

1dkrff031#

您可以考虑向<img>元素的容器中添加一个负数margin-top。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

<div class="container-fluid text-white bg-secondary py-5">

</div>
<div class="container-fluid text-white bg-dark">
  <div class="container">
    <div class="d-flex flex-column-reverse flex-md-row justify-content-md-between">
      <div style="margin-top: -50px">
        <img src="https://picsum.photos/531/1000" alt="" class="img-fluid px-5" />
      </div>

      <div class="py-3 py-lg-5">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <a class="btn btn-primary" href="#">Click here</a>
      </div>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-04-27

我来回答

如何使用CSS或Bootstrap显示比容器更大的图像

1条答案

相关问题

热门标签

最新问答