这个问题在这里已经有了答案:CSSDisplayanImageResizedandCropped(21个回答)关闭4年前。我似乎找不到这个问题的答案，尽管有些答案很接近。我有一张图片，我想从中间取出(裁剪它)，有点像这样:所以它完美地位于中间并且具有相同的纵横比。我所做的就是像这样裁剪图像:..它连接到边缘的地方。基本上，我想要一个固定大小的div，里面有一张图片。此图像需要放大并居中，overflowhidden。我该怎么做？
我的网站有一堆不同的图像要显示，所有这些图像的分辨率和纵横比都不同。CSS中是否有一种简单的方法可以将图像调整大小和裁剪到特定分辨率？出于我的目的，我希望调整后的图像为280x280。当然我可以设置但这会拉伸(stretch)它。我想要两个分辨率中较小的那个，做一个正方形，然后取中心像素。例如，如果分辨率为480x200，我希望它从图像中心取出200x200的部分。我试过谷歌搜索，但无济于事。 最佳答案 不可能使用CSS对图像进行“真实裁剪”。真正的裁剪意味着图像被缩小到新的值，而且它的尺寸也比以前小。但是有一个负边距或者绝对定位的
我正在寻找具有调整大小和可能旋转功能的基于Flash的图像uploader。我已经检查了很多可能性，我发现在简单性和unser体验方面最好的是Kroppr以非常实惠的29欧元/许可证。缺点是，它带有加密的PHP代码以将产品绑定(bind)到子域。这是可以理解的，但是虽然我很乐意花钱买一个这么棒的工具，并准备签署各种法律协议(protocol)来保护许可证，但我还没有准备好使用加密的PHP代码，尤其是来自其网站上什至没有邮寄地址的商店。有没有人知道接近Kroppr并随源代码一起提供的开源或商业解决方案，或者允许完全自定义和免费定义服务器端后端？详细功能:用于裁剪图像的矩形选择、slide
我在Fabric.js中绘制了一个Canvas，我正在向其中添加一组矩形，我想将这些矩形的边缘限制为一组，使其不超出特定区域。想象一下制作一件条纹T恤，条纹是使用一系列矩形制成的，我需要将它们保持在T恤的形状上。我认为最好将整个Canvas夹在T恤的形状上，这样我添加到它的任何东西都会保留在T恤内，但我被卡住了。到目前为止，我只剪裁到基本的圆形和矩形。谢谢 最佳答案 您可以在canvas.clipTo中渲染一个形状:)我刚刚在kitchensink中加载了一个随机的SVG形状并这样做:varshape=canvas.item(0);
我有一个使用amCharts库创建的图表。但是当图像太高时，我会在每个条形图的顶部看到不需要的裁剪，正如我在此处突出显示的那样:请帮帮我，我不想裁剪。这是CSS代码:#chartdiv{width:100%;height:500px;padding:70px0;border:3pxsolidgreen;}body{margin:0000;overflow:hidden;background-color:transparent;font-family:-apple-system,BlinkMacSystemFont,"SegoeUI",Roboto,Helvetica,Arial,san
如需说明，请查看以下图片。第一个是我打算实现的。这是一个带有两个背景图像的文本输入元素，每侧一个。第二张图片是包含我需要的图标的Sprite图片。现在我的问题是，是否可以裁剪背景图像以仅显示图像的一部分？此外，是否可以在多个背景下使用它？第一张图片:第二张图片: 最佳答案 您将不得不使用两个单独的图标图像来使其按您目前的预期工作。使用CSSsprites，背景会根据元素的大小进行裁剪，有一个名为background-clip的实验性CSS3属性，但它无法按照您想要的方式工作(它将裁剪到框的边框、填充或内容，而不是特定尺寸。)因此创建
我有一个大小为147x88的DIV，其中有一个宽度相同但高度可能更大的图像。在这种情况下，图像超出了DIV的边界。无论如何要剪辑图像，请记住我希望我的页面在不支持CSS3(IE7和IE8)的旧浏览器中工作？ 最佳答案 只需隐藏div的溢出，包含的图像将被裁剪为div的尺寸。div{width:147px;height:88px;overflow:hidden;} 关于css-裁剪div的内部内容，我们在StackOverflow上找到一个类似的问题： http
我创建了一个两列的图像网格，它适用于所有风景图像:Link.但是，我添加了一张与布局不符的肖像图像，因此我希望能够“裁剪”图像，使高度与其他图像相匹配。Itriedusinganegativemargin,但它没有效果:.portrait-crop{overflow:hidden;}img.portrait-crop{margin-bottom:-30px;}我不确定我做错了什么。任何帮助将不胜感激。供引用，thisismycode. 最佳答案 您可以像这样裁剪img:CSS:.crop-container{width:200px;
我有一个SVG图(有点复杂)，它是使用php和数据库中的一些数据生成的。在那种情况下，我无法预测svg和任何东西上标签的长度。图表是即时生成的，数据总是未知的。这就是为什么，我从这个开始:我正在设置巨大的View框(1000,1000)，然后我开始在该View框中间的某处生成SVG。在那之后，一些元素有时靠近左边，另一个靠近顶部，例如在底部我有200个空白矩形。是否有任何选项可以自动裁剪SVG中的空白以匹配内容？我有一种直觉，我的想法不好，我遗漏了一些东西或做错了一些事情。假设这可以作为最终产品的示例(版权维基百科):http://upload.wikimedia.org/wikipe
我正在尝试裁剪图像并将裁剪后的数据发送到服务器端。我正在使用imgareaselect插件。我得到了选择的坐标，但无法裁剪图像。互联网上所有可用的解决方案都是使用css预览裁剪图像。但是我怎样才能得到裁剪后的数据呢？无需预览裁剪后的图像。我的代码是cropw=$('#cropimg').imgAreaSelect({maxWidth:300,maxHeight:300,aspectRatio:'1:1',instance:true,handles:true,onSelectEnd:function(img,selection){x1=selection.x1;y1=selection.
