使用 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 到 trim 图像在比图像本身更宽的桌面上运行良好，但是当响应式调整图像大小时，由于图像的宽度和高度总是在变化，这几乎是不可能的取决于设备。

相反；我转向 JavaScript，实际上 trim 将图像设置为所需的宽度和高度以及位置，由 Jcrop 设置，然后使用 img-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;
}

包含此片段的原始答案：

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

Showing a portion of an image using css but having it responsive with img-responsive

html

javascript

css

jquery

jcrop