div로 채우기 위해 고정 너비가있는 이미지

Question

질문이 있습니다. 일부 jquery 이벤트 pixelize 이후에 원하는 이미지가 있습니다. pixelate.js 또는 다른 플러그인을 사용하고 싶지는 않지만 내 프로젝트에는 좋지 않습니다.

내가 원한다면 자동으로 이미지를 동일한 이미지의 더 작은 "복사본"으로 바꿔 CSS 이미지 렌더링을 사용합니다. 픽셀 화되었지만 이미지의 두 번째 복사본은 없습니다. CSS/자바 스크립트로 가능합니까?

죄송합니다. 영어로 감사드립니다.

Answer 1

HTML5의 캔버스 요소를 사용하여이 작업을 수행 할 수 있습니다. 본질적으로 우리는 이미지를 가져 와서 작은 캔버스에 그려서 원래의 이미지 크기를 채우기 위해 캔버스를 늘리고 싶습니다.

$('.image-container').each(function() { 
 
    var canvas = $(this).children('canvas').get(0), 
 
     ctx = canvas.getContext('2d'), 
 
     image = $(this).children('img').get(0), 
 
     imageWidth = $(image).width(), 
 
     imageHeight = $(image).height(), 
 
     scaleFactor = 0.05; 
 
    
 
    canvas.width = scaleFactor * imageWidth; 
 
    canvas.height = scaleFactor * imageHeight; 
 
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height); 
 

 
    $(canvas).width(imageWidth); 
 
    $(canvas).height(imageWidth); 
 
}); 
 

 
$('#toggle-pixelization').on('click', function() { 
 
    $('.image-container').children().toggleClass('hidden') 
 
});

.hidden { 
 
    display: none; 
 
} 
 

 
.image-container canvas { 
 
    image-rendering: -moz-crisp-edges; 
 
    image-rendering: -o-crisp-edges; 
 
    image-rendering: -webkit-optimize-contrast; 
 
    image-rendering: crisp-edges; 
 
    -ms-interpolation-mode: nearest-neighbor; 
 
}

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

 
<div class="image-container"> 
 
    <img src="https://placekitten.com/150/150" /> 
 
    <canvas class="hidden"></canvas> 
 
</div> 
 
<button id="toggle-pixelization">Toggle Pixelization</button>

Answer 2

img { 
    height: 100%; 
    width: 100%; 
} 

img의 크기는 부모의 최대 크기가 될 수 있습니다. 따라서 부모 크기가 조정되면 이미지도 그에 따라 크기가 조정됩니다.