如何使用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%，并避免使用固定的宽度和高度。希望对你有所帮助。