html - 如何找到缩放轮播图像的大小

Question

我对 CSS 和 Bootstrap 比较陌生。我正在尝试在旋转木马下方显示对齐的文本，并在所有屏幕尺寸上将文本边距与图像的左右边缘对齐。每幅图像为 886 × 460 像素。当我尝试 carousel-caption 时，它覆盖了图像，将额外的文本干扰到其上方的空间中，并且文本边距未与图像对齐。

这可能是一个幼稚的问题，但是否有一些其他相关的 CSS 类可以用来确定任何给定屏幕尺寸的图像的实际尺寸，以便我可以将文本边距与图像左右边缘对齐？

下面是我使用 carousel-caption 的代码示例。

<div class="container-fluid px-0">

    <div id="myCarousel" class="carousel slide" data-ride="carousel">

    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol>

        <div class="carousel-inner" role="listbox">
            <div class="flex-grow-0 item active">
                <img class="img-fluid" src="images/pic-1.jpg" alt="ex.1">              
            </div>
            <div class="flex-grow-0 item">
                <img class="img-fluid" src="images/pic-2.jpg" alt="ex.2">
            </div>    
        </div>


        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>

    </div>
    <div class="carousel-caption" style="font-size: 12px; color:#FFFFFF; text-align:justify">
    <h4>Blog</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

Answer 1

尝试将带有类 carousel-caption 的 div 移动到 div #mycarousel 中，标题应该可以工作。

如果没有， 我修改了 Bootstrap code像这样

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="images/pic-1.jpg" class="d-block w-100" alt="...">
     </div>
    <div class="carousel-item">
      <img src="images/pic-2.jpg" class="d-block w-100" alt="...">
     </div>
     <div class="carousel-item">
      <img src="images/pic-1.jpg" class="d-block w-100" alt="...">
    </div>
    </div>

     <div class="carousel-caption d-md-block">
        <h5>First slide label</h5>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

请检查一下。希望对您有所帮助。