具有固定宽度的图像以填充 div答案

【问题标题】：Image with fixed width to fill div具有固定宽度的图像以填充 div
【发布时间】：2016-06-22 11:55:17
【问题描述】：

我有一个问题，在一些 jquery 事件像素化之后，我有一张我想要的图像。我不想使用 pixelate.js 或其他插件，它们不适合我的项目。

我想要的是，使用 css 图像渲染自动将图像更改为同一图片的较小“副本”：像素化但没有图像的第二个副本。用 CSS/javascript 可以吗？

对不起，我的英语不好，谢谢！

【问题讨论】：

您是否希望它看起来好像图像已更改为较低分辨率的副本，然后按比例放大以适应相同的大小？即图像会丢失细节但尺寸保持不变？
是的，这就是我想要的。有可能吗？

标签： javascript jquery css pixelate

【解决方案1】：

您可以使用 HTML5 的 canvas 元素来做到这一点。本质上，我们想要获取我们的图像，将其绘制到一个小画布上，然后拉伸画布以填充原始图像大小。这是一个例子：

$('.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>

【讨论】：

【解决方案2】：

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

您可以将img 的大小设置为它的父级的最大大小。因此，如果父级调整大小，图像也应该相应地调整大小。

【讨论】：

这将如何帮助我将当前图像像素化？
那么，当图像较小时，您希望它被像素化吗？当更大时，您希望它清晰吗？
目前我的图像宽度为：100%；它在父母中。在我的项目中进行了一些 jquery 事件之后，我不需要更改图像宽度，只需要像素化图像。
好的，图像是否希望保持父级的 100% 宽度？另外，当父级较小时，您要对图像进行像素化吗？而当 parent 较大时，您是否要对其进行像素化？
父母并不重要。图像应始终为 100%，但我想知道，如何在不使用 pixelate.js 之类的脚本的情况下使其像素化。