CSS - 保持圖像縱橫比flexbox

它在PC（全尺寸）上看起來不錯，但是當我調整它（用於手機）時，它不保持它的寬高比，並且它只是用來拉伸。

這是它看起來像現在：https://gyazo.com/a1f605bb410865579025644b0a267adf

此外，你可以看到它變爲1個圖像，並在某一點上它可以追溯到2個圖像的一瞬間，它停留在1圖像之後。我該如何解決這個問題？

這是我的CSS：

#images{ 
     display: flex; 
     flex-wrap: wrap; 
    } 

    .image{ 
     display: flex; 
     flex: 1; 
     margin: 5px; 
     min-width: 250px; 
     min-height: 187.5px; 
     object-fit: contain; 

    } 

    .image > img{ 
     flex: 1; 
    }

這是我的HTML：

<div id="images"> 

      <div class="image"> 
       <img src="f1.jpg"> 
      </div> 
      <div class="image"> 
       <img src="f2.jpg"> 
      </div> 
      <div class="image"> 
       <img src="f3.jpg"> 
      </div> 
      <div class="image"> 
       <img src="f1.jpg"> 
      </div> 

      //it just goes on and on like this 
      //it's all temporary now, I will eventualy replace 
      //this with a simple loop. 

</div>

來源

2017-08-24 Luuk Wuijster

你打開使用磚石？ –

我不知道那是什麼，但如果它工作的很好，當然！ –

除非你有非常具體的要求，我建議Masonry：

組合

a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.

與imagesLoaded對於多才多藝輕量級解決

有很多方法來實現砌體。

以下是我個人的最愛。

我所有的評論都是段內下方

body { 
 
    background: #131418; 
 
} 
 

 

 
/* Step 1: start with resetting some defaults */ 
 

 
* { 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    max-width: 100%; 
 
} 
 

 

 
/* Step 2: center things inside the grid and clear some space around it by setting a device based max-width and margin*/ 
 

 
.grid { 
 
    text-align: center; 
 
    max-width: 95vw; 
 
    margin: 2.5vw auto; 
 
} 
 

 

 
/* Step 3: how big should the gap be between grid items? remember that the total gap between two items would be double what you set here since both would have that amount set as their individual padding. Also add box-sizing:border-box to make sure the padding doesn't affect the total widh of the item */ 
 

 
.grid-item { 
 
    padding: 5px; 
 
    box-sizing: border-box; 
 
} 
 

 

 
/* Step 4: Add media queries (subjective) to make the whole grid resposive. */ 
 

 
@media (min-width: 500px) { 
 
    .grid-item { 
 
    width: 50%; 
 
    } 
 
} 
 

 
@media (min-width: 1000px) { 
 
    .grid-item { 
 
    width: 33.333%; 
 
    } 
 
} 
 

 
@media (min-width: 1700px) { 
 
    .grid-item { 
 
    width: 25%; 
 
    } 
 
} 
 

 
@media (min-width: 2100px) { 
 
    .grid-item { 
 
    width: 20%; 
 
    } 
 
}

<!-- Made possible by the great work of David DeSandro @ https://masonry.desandro.com --> 
 

 
<!-- Part 1: Add the scripts --> 
 

 
<!-- Step 1: Let's start by loading jQuery. jQuery is not required for masonary to function but makes things easier --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- Step 2: Then load imagesloaded. imagesloaded makes sure the images are not displayed until they are fully loaded --> 
 
<script src="https://unpkg.com/[email protected]/imagesloaded.pkgd.min.js"></script> 
 

 
<!-- Step 3: we load masonry --> 
 
<script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.min.js"></script> 
 

 

 
<!-- Part 2: Create the grid --> 
 

 

 
<!-- Step 1: Start with a the main grid wrapper--> 
 
<div class="grid"> 
 

 
    <!-- Step 2: Add grid items---> 
 

 
    <div class="grid-item"> 
 
    <img src="https://s-media-cache-ak0.pinimg.com/736x/00/37/03/0037037f1590875493f413c1fdbd52b1--cool-beards-inspiring-photography.jpg" /> 
 
    </div> 
 

 
    <div class="grid-item"> 
 
    <img src="https://s-media-cache-ak0.pinimg.com/736x/cd/90/d9/cd90d9de63fa2c8e5c5e7117e27b5c18--gritty-portrait-photography-studio-photography.jpg"> 
 
    </div> 
 

 
    <!-- Step 3: repeat...---> 
 
    <div class="grid-item"> 
 
    <img src="https://1.bp.blogspot.com/-9QM7ciGXRkQ/V1hsB-wNLBI/AAAAAAAAMoA/eYbSHs00PTAjrI4QAmvYAIGCUe1AuRAnwCLcB/s1600/bryan_cranston_0095.jpg"> 
 
    </div> 
 

 
    <div class="grid-item"> 
 
    <img src="http://webneel.com/sites/default/files/images/project/best-portrait-photography-regina-pagles%20(10).jpg" /> 
 
    </div> 
 

 

 
    <div class="grid-item"> 
 
    <img src="https://s-media-cache-ak0.pinimg.com/736x/dd/45/96/dd4596b601062eb491ea9bb8e3a78062--two-faces-baby-faces.jpg" /> 
 
    </div> 
 

 
    <div class="grid-item"> 
 
    <img src="http://www.marklobo.com.au/news/wp-content/uploads/2013/03/Melbourne_Portrait_Photographer_Mark_Lobo-Cowboy.jpg" /> 
 
    </div> 
 

 
    <div class="grid-item"> 
 
    <img src="https://format-com-cld-res.cloudinary.com/image/private/s--PcYqe7Zw--/c_limit,g_center,h_65535,w_960/a_auto,fl_keep_iptc.progressive,q_95/145054-8576001-Rob-Green-by-Zuzana-Breznanikova_7725_b_w.jpg" /> 
 
    </div> 
 

 
    <div class="grid-item"> 
 
    <img src="http://www.iefimerida.gr/sites/default/files/janbanning11.jpg" /> 
 
    </div> 
 

 
    <div class="grid-item"> 
 
    <img src="https://s-media-cache-ak0.pinimg.com/736x/66/bb/e7/66bbe7acc0d64da627afef440a29714b--portrait-photos-female-portrait.jpg" /> 
 
    </div> 
 

 
    <div class="grid-item"> 
 
    <img src="https://s-media-cache-ak0.pinimg.com/736x/25/34/b6/2534b6c18c659546463f13b2dc62d4ce--natural-portraits-female-portraits.jpg" /> 
 
    </div> 
 

 
    <div class="grid-item"> 
 
    <img src="https://s-media-cache-ak0.pinimg.com/originals/8d/67/12/8d671230ced871df8428b571ed6ec192.jpg" /> 
 
    </div> 
 

 
</div> 
 

 
<!-- Part 3: the script call --> 
 

 
<!-- Now that everything is loaded we create a script to trigger masonary on $grid. Note that this simply says: "if the images are fully loaded, trigger masnory on $grid. --> 
 
<script> 
 
    $(".grid").imagesLoaded(function() { 
 
    $(".grid").masonry({ 
 
     itemSelector: ".grid-item" 
 
    }); 
 
    }); 
 
</script>

來源

2017-08-24 20:21:39

我得到錯誤'Uncaught TypeError：$（...）.LoadedLoaded不是一個函數' –

如果你沒有添加jQuery，會發生這種情況。你需要在你的項目中使用jQuery。 Masnory本身並不需要jQuery，你可以在沒有它的情況下使用它。我在底部使用的腳本需要jQuery。另外，確保jQuery在底部腳本之前加載，最好在所有其他之前加載。 –

啊，我明白了。我已經加載了jQuery，但是，我在加載scrip之後加載了它。它現在很好用。謝謝 –

UPDATE - 我添加了一個例子。

#images { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.image { 
 
    flex: 1; 
 
} 
 

 
.image img { 
 
    width: 100%; 
 
    height: auto; 
 
}

<div id="images"> 
 
    <div class="image"> 
 
    <img src="https://i.guim.co.uk/img/media/4f48e55216fe5c09963e6cac4ec2530cc08a4e36/0_0_600_600/master/600.jpg?w=300&q=55&auto=format&usm=12&fit=max&s=add90ae66a8a0c9b35606346845539f9"> 
 
    </div> 
 
    <div class="image"> 
 
    <img src="https://i.guim.co.uk/img/media/4f48e55216fe5c09963e6cac4ec2530cc08a4e36/0_0_600_600/master/600.jpg?w=300&q=55&auto=format&usm=12&fit=max&s=add90ae66a8a0c9b35606346845539f9"> 
 
    </div> 
 
    <div class="image"> 
 
    <img src="https://i.guim.co.uk/img/media/4f48e55216fe5c09963e6cac4ec2530cc08a4e36/0_0_600_600/master/600.jpg?w=300&q=55&auto=format&usm=12&fit=max&s=add90ae66a8a0c9b35606346845539f9"> 
 
    </div> 
 
    <div class="image"> 
 
    <img src="https://i.guim.co.uk/img/media/4f48e55216fe5c09963e6cac4ec2530cc08a4e36/0_0_600_600/master/600.jpg?w=300&q=55&auto=format&usm=12&fit=max&s=add90ae66a8a0c9b35606346845539f9"> 
 
    </div> 
 

 
</div>

爲了保持圖像的縱橫比，可以定義width:100%和height:auto。它將調整圖像的寬度與容器的寬高比。

來源

2017-08-24 20:08:11 felixmosh

不起作用，已經嘗試過。 –

增加了一個例子。 – felixmosh

這是發生了什麼事： https://gyazo.com/58174b31f1bf40222dacfd051f283366 –

最近，我發現CSS屬性：對象的配合

她的包含多個選項：

包含
填寫
蓋
沒有
縮小

這很容易，並保持圖像的良好比率

文檔：HERE

來源

2017-08-24 20:18:04 Jonathan

那麼，我已經在使用它了。 'object-fit：contains;' –

CSS - 保持圖像縱橫比flexbox

回答

相關問題