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%で、固定幅と高さの使用は避けてください。それがあなたに役立つことを願っています。あなたがコンセプトの下に使用することができます