如何调整图像尺寸？

Question

我将图像放置在页面中央，并将文本放置在页面中央。但是图像看起来很小。如何在引导程序中调整其宽度和高度？

    .inner {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 0, 0, 0.3);
      color: #fff;
      padding: 30px;
    }
    

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container">  
       <div class="img-text-container">
        <img src="https://dummyimage.com/600x400/000/fff&text=+" class="img-fluid max-width:100% 
          height:auto" alt="Responsive image">
           <div class="text-center bg-text inner">
             <h1> acknowledge Nature! </h1>
               <p>Nature is the most important thing in the life 
                which is alive.</p>
        </div>
      </div>
    </div>

Answer 1

您可以执行以下操作（以全屏模式查看结果：

    .inner {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 0, 0, 0.3);
      color: #fff;
      padding: 30px;
    }

    .img-text-container{
      position: relative;
    }
 
    .img-text-container img{
       width: 100%;
    }

    

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container">  
       <div class="img-text-container">
        <img src="https://dummyimage.com/600x400/000/fff&text=+" class="img-fluid max-width:100% 
          height:auto" alt="Responsive image">
           <div class="text-center bg-text inner">
             <h1> acknowledge Nature! </h1>
               <p>Nature is the most important thing in the life 
                which is alive.</p>
        </div>
      </div>
    </div>