Question

如何在引导程序中调整图像的宽度和高度？我希望图像高度小于。如何调整高度？我如何在上面写文字？图片下方会显示文字。

 <div class="container-fluid">
     <div class="row">
        <img src="https://image.shutterstock.com/image-photo/blue-morpho-peleides-big- 
         butterfly-600w-407651284.jpg" class="img-fluid" alt="butterfly">
          <figcaption class="figure=caption"> butterfly</figcaption>
      </div>
 </div>

Answer 1

要在图像上放置文字，您只需要在div标记内创建另一个col标记

您可以使用带有width标签的html属性height和width属性为图像设置height和img

在这里，我为您的图片设置了width至80%

<img src="https://image.shutterstock.com/image-photo/blue-morpho-peleides-big-butterfly-600w-407651284.jpg" class="img-fluid" alt="butterfly" width="80%">

这是如何在图像上放置文本的代码。

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">



<! -- HTML -- >
<div class="container">
  <div class="row">
    <div class="col-6">
      <img src="https://image.shutterstock.com/image-photo/blue-morpho-peleides-big- 
        butterfly-600w-407651284.jpg" class="img-fluid" alt="butterfly">
      <div class="carousel-caption">
        <h1>Example headline.</h1>
      </div>
    </div>
    <div class="col-6">
      <img src="https://image.shutterstock.com/image-photo/blue-morpho-peleides-big- 
          butterfly-600w-407651284.jpg" class="img-fluid" alt="butterfly">
      <div class="carousel-caption">
        <h1>Example headline.</h1>
      </div>
    </div>
  </div>
</div>

如何在引导程序中调整图像大小？

1 个答案: