如何找到缩放的轮播图像的大小答案

【问题标题】：how to find the size of a scaled carousel image如何找到缩放的轮播图像的大小
【发布时间】：2020-03-12 19:47:18
【问题描述】：

我对 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>

【问题讨论】：

标签： html css bootstrap-4 media-queries carousel

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

请查看它。希望对您有所帮助。

【讨论】：