使用 css 显示图像的一部分，但使用 img-responsive 进行响应

Question

我创建了一个系统，用户将上传图像，将其大小调整到一定宽度，然后用户可以裁剪图像（使用 imgAreaSelect 但升级到 Jcrop 以添加移动使用）。

我这一切都工作正常。一旦用户将 Jcrop 的选择器移动到他们想要的位置并选择保存按钮，我就让 jQuery 编写一些花哨的 CSS 来显示用户想要的图像部分（其余部分通过 隐藏）加上更多表单来添加照片信用和overflow: hidden其他有关照片的信息。

这再次在桌面上运行得很好。该图像在移动设备上为全尺寸且不响应，因此您看不到照片的大部分内容。我已经尝试解决这个问题有一段时间了（除了禁用预览照片）。有什么方法可以让我的方法做出响应吗？

$(document).on('click','#save-image',function() {

    //$('img.mobimg').imgAreaSelect({remove:true});

    //$('#the-image').fadeOut();

    //Write the preview image using variables from image selector.

    $('#the-image').fadeOut().html('<div align="center"><div id="img" style="position: relative; width: '+$('#w').val()+'px; height: '+$('#h').val()+'px; overflow: hidden;">'+

                            '<img src="'+theimg+'" id="finished-image" style="position: absolute; top: -'+$('#y1').val()+'px; left: '+$('#x1').val()+'px;">'+

                          '</div></div><hr>').fadeIn(function() { $('#finished-image').addClass('img-responsive'); });

    // Fade in form to allow user to finish adding details.

    $('.form-finish').fadeIn();

    // Fade in main form submit button to allow user to submit the completed form.

    $('.panel-footer').fadeIn();  // Final Submit Button to Fade In

    

    jcrop_api.destroy();

});

Answer 1

使用 CSS 修剪图像对于比图像本身更宽的桌面来说效果很好，但是当响应式地调整图像大小时，由于图像的宽度和高度总是根据设备而变化，因此几乎不可能。反而; 我转向 JavaScript，它实际上将图像修剪为宽度和高度以及所需的位置，由 Jcrop 设置，然后使用 Jcropimg-responsive调整图像大小以适应移动设备就没有问题了。function showPart(img, offsetTop, offsetLeft, width, height){    var src = img.src;    $(img).replaceWith("<canvas id='cnvs' class='img-responsive' style='max-width:100%;'></canvas>");    var canvas = document.getElementById('cnvs');    canvas.height = height;    canvas.width = width;    var ctx = canvas.getContext("2d");    var img = new Image();    img.onload = function(){        ctx.drawImage(this, offsetLeft, offsetTop, width, height, 0, 0, width, height);    };    img.src = src;}