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%으로 지정하고 고정 폭과 높이를 사용하지 마십시오. 희망이 당신에게 도움이됩니다. 당신은 개념 아래에 사용할 수 있습니다