如何使用CSS網格佈局來利用響應式圖像

Question

我一直在使用新的CSS網格佈局，有一件事情我似乎無法找到關於如何使圖像響應的信息？我試過使用媒體查詢並將圖像寬度設置爲100％，但圖像仍然在網格外溢出。我錯過了什麼？

Answer 1

您可以使用以下概念：

function getRandomSize(min, max) { 
 
    return Math.round(Math.random() * (max - min) + min); 
 
} 
 

 
var allImages = ""; 
 

 
for (var i = 0; i < 25; i++) { 
 
    var width = getRandomSize(200, 400); 
 
    var height = getRandomSize(200, 400); 
 
    allImages += '<img src="https://placekitten.com/'+width+'/'+height+'" alt="pretty kitty">'; 
 
} 
 

 
$('#photos').append(allImages);

#photos { 
 
    /* Prevent vertical gaps */ 
 
    line-height: 0; 
 
    
 
    -webkit-column-count: 5; 
 
    -webkit-column-gap: 0px; 
 
    -moz-column-count: 5; 
 
    -moz-column-gap:  0px; 
 
    column-count:   5; 
 
    column-gap:   0px; 
 
} 
 

 
#photos img { 
 
    /* Just in case there are inline attributes */ 
 
    width: 100% !important; 
 
    height: auto !important; 
 
} 
 

 
@media (max-width: 1200px) { 
 
    #photos { 
 
    -moz-column-count: 4; 
 
    -webkit-column-count: 4; 
 
    column-count:   4; 
 
    } 
 
} 
 
@media (max-width: 1000px) { 
 
    #photos { 
 
    -moz-column-count: 3; 
 
    -webkit-column-count: 3; 
 
    column-count:   3; 
 
    } 
 
} 
 
@media (max-width: 800px) { 
 
    #photos { 
 
    -moz-column-count: 2; 
 
    -webkit-column-count: 2; 
 
    column-count:   2; 
 
    } 
 
} 
 
@media (max-width: 400px) { 
 
    #photos { 
 
    -moz-column-count: 1; 
 
    -webkit-column-count: 1; 
 
    column-count:   1; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="photos"></section>

Answer 2

提供imd默認樣式max-width:100%，並避免使用固定的寬度和高度。希望對你有所幫助。