如何在引导转盘中设置内部div (img)的高度

Question

如何在引导转盘中设置最小div高度，同时保持整个图像缩放到div高度。换句话说，我得到了1920x1080的图像，在~992px上看起来一切都很棒(图像1)。但是，在将网站缩小到移动视图(在992px下面)的同时，旋转木马中的图像也在缩放，这是一种推荐的方式(图2)。但我想有一个声明的div高度(主要是img大小)，是完全缩放到那个高度(图像的宽度必须保持不变，图像不能不被裁剪)。图3显示了我想要达到的效果。

观点-建议观看以更好地了解：-

​

​

​

.carousel-inner img {
  width: 100%;
  height: 100%;
}
.carousel-caption {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.carousel-caption h1 {
  text-transform: uppercase;
  font-size: 500%;
  font-weight: 500;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.carousel-caption h2 {
  text-transform: uppercase;
  font-size: 200%;
  font-weight: 500;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

    <div id="slides" class="carousel slide background-carousele" data-ride="carousel">
    <div class="container-fluid carousel-main">
        <ul class="carousel-indicators">
            <li data-target="#slides" data-slide-to="0" class="active"></li>
            <li data-target="#slides" data-slide-to="1"></li>
            <li data-target="#slides" data-slide-to="2"></li>
        </ul>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <!-- <img src="http://rosewood.ancorathemes.com/wp-content/uploads/2017/09/slide1.jpg" alt="Background Image 1"> -->
                <img src="images/C8.jpg" alt="Background Image 1">
                <div class="carousel-caption">
                    <h1 class="display-2">Witamy w </h1>
                    <h1 class="display-2">Lorem ipsum</h1>
                    <h2>Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsum</h2>
                </div>
            </div>
            <div class="carousel-item ">
                <img src="images/C3.jpg" alt="Background Image 2">
                <div class="carousel-caption">
                    <h1 class="display-2">Lorem ipsum 2 </h1>
                    <h2>Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsum</h2>
                </div>
            </div>
            <div class="carousel-item ">
                <img src="/images/C7.jpg" alt="Background Image 3">
                <div class="carousel-caption">
                    <h1 class="display-2">Lorem ipsum 3 </h1>
                    <h2>Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsum</h2>
                </div>
            </div>

        </div>
    </div>

</div>

​

我试图使用媒体来设置div的高度，但它不能像我想要的那样工作。

@media (max-width: 991px) {
  .carousel-item {
    min-height: 100%;
    width: 100%;
  }
}

Answer 1

我想出了一种方法，可以很好地减少失真，以满足您对使用最小高度的偏好。如果保持宽高比为=> 768x320，让我们集思广益1920x800。如果我们对@media (最小宽度: 768px)和(最大宽度: 991px)或更小使用768x320。如果我们保持最小高度:300px。它将是1920/768= 2.5，即比使用原始的1920x至少减少2.5的失真

请额外复制两份992x413和768x320，并使用以下代码编辑到您的文件中。让我知道它是如何工作的。

<div class="carousel_img">
    <img src="link-to-768.jpg" alt="" class="img-fluid">
</div>

<style>
/********** Large devices only **********/
@media (min-width: 1200px) {
    .carousel_img {
      background: url('link-to-1920.jpg') no-repeat;
      height: 800px;
    }
  }
  
  /********** Medium devices only **********/
  @media (min-width: 992px) and (max-width: 1199px) {
    #carousel_img {
        background: url('link-to-992.jpg') no-repeat;
        height: 413px;
      }    
  }
  
  /********** Small devices only **********/
  @media (min-width: 768px) and (max-width: 991px) {
    #carousel_img {
        background: url('link-to-768.jpg') no-repeat;
        height: 413px;
      } 
  }
  
  /********** Extra small devices only **********/
  @media (max-width: 767px) {
    
  }
  
  
  /********** Super extra small devices Only (e.g., iPhone 4) **********/
  @media (max-width: 479px) {
    
    .col-xxs-12 {   /*This col-xxs is not defined in Bootstrap but very useful. I put here in case you need*/
      position: relative;
      min-height: 1px;
      padding-right: 15px;
      padding-left: 15px;
      float: left;
      width: 100%;
    }
  }
  
  </style>