如何调整图像大小？答案

【问题标题】：How to adjust Image size?如何调整图像大小？
【发布时间】：2020-10-02 12:32:06
【问题描述】：

我将图像放置在页面的中心，并将其上的文本放置在中间。但图像看起来很小。如何在 bootstrap 中调整其宽度和高度？

    .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>

【问题讨论】：

标签： html css image twitter-bootstrap size

【解决方案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>

【讨论】：

图像覆盖整个屏幕。如何覆盖图像高度只有屏幕的一半。（屏幕的宽度 100 % 和高度 50%）
你可以尝试为你的图片设置一个最大高度.img-text-container img {width: 100%;max-height: 400px;}
如果高度较小，则它不会出现在中心。我试过 col-md-8。图像尺寸较小但未出现在中心。
将 text-align: center 赋予其父级但不起作用。
.img-text-container img {width: 100%;max-height: 400px;} – 工作正常。