Question

我是前端Web开发的初学者。我的目标是制作一个旋转木马，其中包含从不同大小的谷歌拍摄的图像，使旋转木马具有最大图像的尺寸，所有这一切都没有打破reponsivnes

所以这是一个例子：

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

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img class="Image" src="http://somewhere.image1.jpg" alt="Image from google">
      <div class="carousel-caption">
          <h3>Title</h3>
          <p>Description</p>
      </div>
    </div>


    <div class="item">
      <img class="Image" src="http://somewhere.image2.jpg" alt="Image from google">
      <div class="carousel-caption">
          <h3>Title</h3>
          <p>Description</p>
      </div>
    </div>

    <div class="item">
      <img class="Image" src="http://somewhere.image3.jpg" alt="Image from google">
      <div class="carousel-caption">
        <h3>Title</h3>
        <p>Description</p>
      </div>
    </div>

  </div>

如果没有默认或简单的方法，我想在javascript / JQuery中编写一个函数，如下面的伪代码：

$( document ).ready(function() {
     $('#myCarousel').carousel();
      myFunction();
});

function myFunction() {
  var biggestWidth;
  var biggestHeight;
  var dimensionsArr;
  for each Image class object {

    //get the size array
    dimensionsArr = getSize(Image);

  //if biggest dimenensons are null then assign the first one
    if (biggestWidth = null && biggestHeight = null){
      biggestWidth = dimensionsArr[0];
      biggestHeight = dimensionsArr[1];
    }else{
      biggestWidth = ifBigger(dimensionsArr[0],biggestWidth);
      biggestHeight = ifBIgger(dimensionsArr[1],biggestHeight);
    }

    //Next i want to display the carousel in the way it would scale
    //on the device (or parent element) with the biggest image, but for all images. Ofcourse the biggest image should scale to width of the parent element of the carousel as well like it is by default
  }
}

function getSize(Image image) {
  var widthHeight;
  Get the size of the image

  //This would be an array [width, height]
  return widthHeight
}

//the function determines if new dimension is bigger or old biggest
// and return the bigger one
function ifBigger(newSize,biggestSize) {
  if(newSize > biggestSize) {
     return newSize;
     }
  else() {
    return biggestSize;
  }
}

Answer 1

这个CSS应该有所帮助。无论尺寸如何，它都会使所有图像的高度和宽度相同但是，在某些情况下，图像可能会显得拉伸。调整百分比以获得所需的宽高比。对于16：9的图像，这个是56.25％。是的，它会有所回应。

.img-wrapper {
 display: block;
 height: 0;
 overflow: hidden;
 padding: 0;
 position: relative;
 padding-bottom: 56.25%;
 }

.img-item {
 border: 0 none;
 bottom: 0;
 height: 100%;
 left: 0;
 position: absolute;
 top: 0;
 width: 100%;
 }

使用类＆＃39; .img-wrapper＆＃39;来包装图像需要额外的div。和班级＆＃39;图片项目＆＃39;应该给图像本身，在这种情况下像

<div class="img-wrapper">
<img class="Image" src="http://somewhere.image2.jpg" alt="Image from google" class="img-item">
<div>

如何在不破坏响应性的情况下制作具有不同图像尺寸的静态旋转木马

1 个答案: