応答性を損なうことなく、さまざまな画像サイズの静的カルーセルを作る方法

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> 

これを行うには、デフォルトまたは簡単な方法が存在しない場合、私は擬似コード以下のようなジャバスクリプト/ jQueryの関数を書きたいと思います：このCSSは助けるべき

$(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

。サイズに関係なくすべての画像を同じ高さと幅にしますが、場合によっては画像が伸びて見えることがあります。あなたが望む縦横比を得るためにパーセンテージを調整してください。これは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%; 
} 

余分なdiv要素は「.imgのラッパー」クラスとクラスのイメージ項目 'で、画像をラップするために必要とされる

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

のようなこの場合には、画像自体に与えるべきです