Изображение с фиксированной шириной для заполнения div

Question

У меня есть вопрос, у меня есть изображение, которое я хочу после некоторого события jquery event pixelizate. Я не хочу использовать pixelate.js или другие плагины, они не подходят для моего проекта.

Что я хочу, автоматически меняю изображение на меньшую «копию» одного и того же изображения с помощью рендеринга css: pixelated, но без второй копии изображения. Это возможно с помощью CSS/javascript?

Извините за мой плохой английский и спасибо!

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 O быть максимальный размер от его родителей. Поэтому, если родительский размер изменяется, изображения также должны соответствующим образом изменять размер.