Question

我正在使用BS4旋转木马，而我要放的图片比屏幕大得多。它们的宽度还可以，但是高度很大，用户必须滚动才能看到完整图像，请告诉我一种减小高度而不影响图片形状和质量的方法？请对此进行指导。并告诉我如何动态调整？所有样式默认为BS4。代码如下：

<div id="carouselFull" class="carousel slide" data-ride="carousel">
   <!--    <ol class="carousel-indicators">
           <li data-target="#carouselIndicators" data-slide-to="0" class="active"></li>
           <li data-target="#carouselIndicators" data-slide-to="1"></li>
           <li data-target="#carouselIndicators" data-slide-to="2"></li>
       </ol>

  -->

       <div class="carousel-inner">
           <div class="carousel-item active">
               <img class="d-block w-100" src="img/Home_pics/1.jpg" alt="First slide" id="myImg">

           </div>
           <div class="carousel-item">
               <img class="d-block w-100" src="img/Home_pics/2.jpg" alt="Second slide" id="myImg">

           </div>
           <div class="carousel-item">
               <img class="d-block w-100" src="img/Home_pics/3.jpg" alt="Third slide" id="myImg">

           </div>

           <div class="carousel-item">
               <img class="d-block w-100" src="img/Home_pics/4.jpg" alt="First slide" id="myImg">

           </div>
           <div class="carousel-item">
               <img class="d-block w-100" src="img/Home_pics/5.jpg" alt="Second slide" id="myImg">

           </div>
           <div class="carousel-item">
               <img class="d-block w-100" src="img/Home_pics/6.jpg" alt="Third slide" id="myImg">

           </div>

           <div class="carousel-item">
               <img class="d-block w-100" src="img/Home_pics/7.jpg" alt="First slide" id="myImg">

           </div>
           <div class="carousel-item">
               <img class="d-block w-100" src="img/Home_pics/8.jpg" alt="Second slide" id="myImg">

           </div>
           <div class="carousel-item">
               <img class="d-block w-100" src="img/Home_pics/9.jpg" alt="Third slide" id="myImg">

           </div>


       </div>
       <a class="carousel-control-prev" href="#carouselFull" 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="#carouselFull" role="button" data-slide="next">
           <span class="carousel-control-next-icon" aria-hidden="true"></span>
           <span class="sr-only">Next</span>
       </a>
   </div>

Answer 1

使用引导程序的img-fluid类。

import java.io.FileOutputStream;

import org.apache.poi.ss.usermodel.*;
import org.apache.poi.xssf.usermodel.XSSFWorkbook;
import org.apache.poi.hssf.usermodel.HSSFWorkbook;

import org.apache.poi.ss.util.CellRangeAddress;
import org.apache.poi.ss.util.CellUtil;

public class CreateExcelMergedRegions {

 public static void main(String[] args) throws Exception {

 /*
 goal:
     +---------+---------+----------+
     |    A    |    B    |    C     |
 +---+------------------------------+
 | 1 |         |      Savings       |
 +---+ Month   |--------------------+
 | 2 |         | January | February |
 +---+---------+---------+----------+
 */

  Workbook workbook = new XSSFWorkbook();
  //Workbook workbook = new HSSFWorkbook();

  Sheet sheet = workbook.createSheet();

  CellRangeAddress mergedRegion = new CellRangeAddress(0,0,1,2); // row 1 col B and C
  sheet.addMergedRegion(mergedRegion);
  mergedRegion = new CellRangeAddress(0,1,0,0); // row 1 and 2 col A 
  sheet.addMergedRegion(mergedRegion);

  Row row = sheet.createRow(0); // row 1
  Cell cell = row.createCell(0); // cell A1
  cell.setCellValue("Month");
  // set vertical alignment center
  CellUtil.setCellStyleProperty(cell, CellUtil.VERTICAL_ALIGNMENT, VerticalAlignment.CENTER); 

  cell = row.createCell(1); // cell B1
  cell.setCellValue("Savings");
  // set horizontal alignment center
  CellUtil.setCellStyleProperty(cell, CellUtil.ALIGNMENT, HorizontalAlignment.CENTER);

  row = sheet.createRow(1); // row 2
  cell = row.createCell(1); // cell B2
  cell.setCellValue("January");
  cell = row.createCell(2); // cell C2
  cell.setCellValue("February");

  if (workbook instanceof XSSFWorkbook) {
   workbook.write(new FileOutputStream("CreateExcelMergedRegions.xlsx"));
  } else if (workbook instanceof HSSFWorkbook) {
   workbook.write(new FileOutputStream("CreateExcelMergedRegions.xls"));
  }
  workbook.close();

 }

}

https://getbootstrap.com/docs/4.1/content/images/

Answer 2

您可以使用一些jQuery将内嵌图像转换为背景图像：

$('#carouselFull').find('.carousel-item').each(function() {
  var imgContainer = $(this),
    bkImg = imgContainer.find('img').attr('src');
  imgContainer.css("background-image", 'url("' + bkImg + '")');
});

#carouselFull {
  width: 100%;
}

#carouselFull .carousel-item {
  height: 100vh;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.carousel-item img {
  display: none;
}


/* Optionally, put the contols closer to the sides */
.carousel-control-next, .carousel-control-prev {
  width: 12.5% !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div id="carouselFull" class="carousel slide" data-ride="carousel">

  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://i.stack.imgur.com/ZeOrf.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="https://i.stack.imgur.com/TICOa.jpg" alt="Second slide">
    </div>

  </div>
  <a class="carousel-control-prev" href="#carouselFull" 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="#carouselFull" role="button" data-slide="next">
           <span class="carousel-control-next-icon" aria-hidden="true"></span>
           <span class="sr-only">Next</span>
       </a>
</div>

由于background-size: cover，您要添加到其轮播中的所有项目都将显示为背景图像，尺寸为合适。

有没有一种方法可以根据浏览器的高度和宽度来设置BS4轮播图片的高度和宽度？

2 个答案: