CSS显示图像调整大小和裁剪

我想显示来自URL的具有一定宽度和高度的图像，即使它具有不同的大小比。 所以我想调整大小(保持比例)，然后将图像切割到我想要的大小。

我可以用html img属性调整大小，我可以用background-image切割。
我怎样才能两者兼顾呢?< / p >

例子:

这张图片:

enter image description here

< p > < br > 有大小800x600像素和我想显示像200x100像素的图像

< p > < br > 使用img，我可以调整图像200x150px:

<img
style="width: 200px; height: 150px;"
src="http://i.stack.imgur.com/wPh0S.jpg">
< p > < br > 结果是:

<img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg">


And with background-image I can cut the image 200x100 pixels.

<div
style="background-image:
url('https://i.stack.imgur.com/wPh0S.jpg');
width:200px;
height:100px;
background-position:center;">&nbsp;</div>
< p > < p > 给我:< / p > 

    <div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div>


How can I do both?
Resize the image and then cut it the size I want?

920201 次浏览
小开

您可以将img标记放在div标记中，但我建议不要在浏览器中缩放图像。它在大多数时候都做得很糟糕，因为浏览器的缩放算法非常简单。最好先在Photoshop或ImageMagick中进行缩放，然后将其漂亮地提供给客户端。

小开
最佳答案

你可以把两种方法结合起来使用。

    .crop {
width: 200px;
height: 150px;
overflow: hidden;
}


.crop img {
width: 400px;
height: 300px;
margin: -75px 0 0 -100px;
}
    <div class="crop">
<img src="https://i.stack.imgur.com/wPh0S.jpg" alt="Donald Duck">
</div>

你可以使用负margin在<div/>中移动图像。

小开 
.imgContainer {
overflow: hidden;
width: 200px;
height: 100px;
}
.imgContainer img {
width: 200px;
height: 120px;
}

<div class="imgContainer">
<img src="imageSrc" />
</div>

包含的div本质上是通过隐藏溢出来裁剪图像。

小开

我所做的是创建一个服务器端脚本，它将在服务器端调整大小和裁剪图片，这样它就会在互联网上发送更少的数据。

它相当简单，但如果有人感兴趣，我可以挖掘并发布代码(asp.net)

小开

在CSS3中，可以用background-size改变background-image的大小，同时实现这两个目标。

在css3.info上有有很多例子。

根据您的示例实现，使用donald_duck_4.jpg。在这种情况下，background-size: cover;正是你想要的-它适合background-image覆盖包含<div>的整个区域，并剪辑多余的部分(取决于比例)。

.with-bg-size {
background-image: url('https://i.stack.imgur.com/wPh0S.jpg');
width: 200px;
height: 100px;
background-position: center;
/* Make the background image cover the area of the <div>, and clip the excess */
background-size: cover;
}
<div class="with-bg-size">Donald Duck!</div>

小开 
<p class="crop"><a href="http://templatica.com" title="Css Templates">
<img src="img.jpg" alt="css template" /></a></p>

.crop {
float: left;
margin: .5em 10px .5em 0;
overflow: hidden; /* this is important */
position: relative; /* this is important too */
border: 1px solid #ccc;
width: 150px;
height: 90px;
}
.crop img {
position: absolute;
top: -20px;
left: -55px;
}
小开

谢谢sanchothefat。

我对你的回答有改进的地方。由于裁剪是非常适合每一个图像，这个定义应该在HTML而不是CSS。

<div style="overflow:hidden;">
<img src="img.jpg" alt="" style="margin:-30% 0px -10% 0px;" />
</div>
小开 
<div class="crop">
<img src="image.jpg"/>
</div>

.crop {
width: 200px;
height: 150px;
overflow: hidden;
}
.crop img {
width: 100%;
/*Here you can use margins for accurate positioning of cropped image*/
}
小开 
img {
position: absolute;
clip: rect(0px, 140px, 140px, 0px);
}

<img src="w3css.gif" width="100" height="140" />
小开

你试过用这个吗?

.centered-and-cropped { object-fit: cover }

我需要调整图像的大小，中心(垂直和水平)，然后裁剪它。

我很高兴地发现，它可以在一个css行中完成。 检查这里的例子:http://codepen.io/chrisnager/pen/azWWgr/?editors=110

下面是这个例子中的CSS和HTMLcode:

.centered-and-cropped { object-fit: cover }
<h1>original</h1>
<img height="200" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">
    

<h1>object-fit: cover</h1>
<img class="centered-and-cropped" width="200" height="200"
style="border-radius:50%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">

小开 
img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
小开

在裁剪类中，放置你想要显示的图像大小:

.crop {
width: 282px;
height: 282px;
overflow: hidden;
}
.crop span.img {
background-position: center;
background-size: cover;
height: 282px;
display: block;
}

html看起来像这样:

<div class="crop">
<span class="img" style="background-image:url('http://url.to.image/image.jpg');"></span>
</div>
小开
< p >生活的例子: https://jsfiddle.net/de4Lt57z/ < / p >

HTML:

<div class="crop">
<img src="example.jpg" alt="..." />
</div>

CSS:

    .crop img{
width:400px;
height:300px;
position: absolute;
clip: rect(0px,200px, 150px, 0px);
}

< >强劲的解释: 在这里，图像是根据图像的宽度和高度值调整大小。剪切是通过clip属性来完成的 关于剪辑属性的详细信息如下: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/ < / p >

小开

如果你正在使用引导，尝试使用{background-size: cover; }对于<div>可能给div一个类，比如<div class="example" style=url('../your_image.jpeg');>，这样它就变成 <代码> div.example { background-size:封面}< /代码> < / p >

小开

有像Filestack这样的服务会为你做这件事。

它们获取你的图像url，并允许你使用url参数来调整它的大小。这很简单。

将图像大小调整为200x100，但保持纵横比后，图像将如下所示

整个url看起来像这样

https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=width:200/crop=d:[0,25,200,100]/https://i.stack.imgur.com/wPh0S.jpg

但重要的是

resize=width:200/crop=d:[0,25,200,100]

enter image description here

小开

我最近需要这样做。我想做一个缩略图链接到NOAA的图表。由于他们的图形可以随时改变，我希望我的缩略图也能随之改变。但他们的图表有一个问题:它在顶部有一个巨大的白色边框，所以如果你只是缩放它来制作缩略图，你最终会在文档中出现多余的空白。

以下是我的解决方法:

http://sealevel.info/example_css_scale_and_crop.html

首先我需要做一点算术。来自NOAA的原始图像是960 × 720像素，但前70个像素是一个多余的白色边界区域。我需要一个348 × 172的缩略图，顶部没有额外的边界区域。这意味着原始图像的期望部分是720 - 70 = 650像素高。我需要将其缩小到172像素，即172 / 650 = 26.5%。这意味着需要从缩放图像的顶部删除70 = 19行的26.5%的像素。

所以…

  1. 设置高度= 172 + 19 = 191像素:

    身高= 191 < / p >

  2. 设置底部边距为-19像素(将图像缩短为172像素高):

    margin-bottom: -19像素 < / p >

  3. 设置顶部位置为-19像素(向上移动图像，使顶部19像素行溢出&是隐藏的，而不是底部的):

    前:-19像素 < / p >

生成的HTML如下所示:

<a href="…" style="display:inline-block;overflow:hidden">
<img width=348 height=191 alt=""
style="border:0;position:relative;margin-bottom:-19px;top:-19px"
src="…"></a>

如你所见，我选择了包含<a>标签，但你可以设计一个<div>

这种方法的一个缺点是，如果您显示边界，顶部的边界将会丢失。因为我使用border=0，所以这对我来说不是问题。

小开

如果你正在使用<img>标记，object-fit可能会帮助你

下面的代码将为您裁剪图像。你可以使用object-fit

img {
object-fit: cover;
width: 300px;
height: 337px;
}
小开

你可以使用Kodem的图像调整服务。您可以通过http调用调整任何图像的大小。可以在浏览器中随意使用，也可以在生产应用程序中使用。

  • 上传图片到你喜欢的地方(S3, imgur等)
  • 将其插入到您的专用API url(从我们的仪表板)
小开

尝试使用clip-path属性:

clip-path属性允许您将一个元素剪辑为一个基本形状或

注意:clip-path属性将替换已弃用的剪辑 财产。< / p > 

img {
width: 150px;
clip-path: inset(30px 35px);
}
<img src="http://i.stack.imgur.com/wPh0S.jpg">

More examples here.

小开

你也可以使用一个叫做Croppie的工具来裁剪图片…

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="https://foliotek.github.io/Croppie/croppie.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script src="https://foliotek.github.io/Croppie/croppie.js"> </script>
<script src="https://foliotek.github.io/Croppie/bower_components/exif-js/exif.js"> </script>


<style>
#page {
background: #ffffff;
padding: 20px;
margin: 20px;
}


#demo-basic {
width: 600px;
height: 600px;
}
</style>
</head>
<body>
<h1>Crop Image Demo</h1>
<input id="upload" type="file" />
<br />
<div id="page">
<div id="demo-basic"></div>
</div>


<input id="upload-result" type="button" value="Crop Image"/>
<br />
<img id="cropped-result" src=""/>


<script>
var $uploadCrop;


$("#upload").on("change", function () { readFile(this); show(); });


$("#upload-result").on("click", function (ev) {
$uploadCrop.croppie("result", {
type: "canvas",
size: "viewport"
}).then(function (resp) {
$("#cropped-result").attr("src", resp);
});
});


function show() {
$uploadCrop = $("#demo-basic").croppie({
viewport: { width: 100, height: 100 },
boundary: { width: 300, height: 300 },
enableResize: true,
enableOrientation: true,
mouseWheelZoom: 'ctrl',
enableExif: true
});
}


function readFile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
        

reader.onload = function (e) {
$("#demo-basic").addClass("ready");
$uploadCrop.croppie("bind", {
url: e.target.result
}).then(function () {
console.log("jQuery bind complete");
});
            

}
        

reader.readAsDataURL(input.files[0]);
}
else {
alert("Sorry - you're browser doesn't support the FileReader API");
}
}
</script>
</body>
</html>
小开

之前的答案的一个小补充，包括object-fit: cover:

object-position

您可以使用object-position属性更改替换元素的内容对象在元素框中的对齐方式。

.trimmed-cover {
object-fit: cover;
width: 100%;
height: 177px;
object-position: center 40%;
}
<img class="trimmed-cover" src="http://i.stack.imgur.com/wPh0S.jpg">

result.gif


提交答案