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

I want to show an image from an URL with a certain width and height even if it has a different size ratio. So I want to resize (maintaining the ratio) and then cut the image to the size I want. I can resize with html img property and I can cut with background-image. How can I do both? Example: This image: Has the size 800x600 pixels and I want to show like an image of 200x100 pixels With img I can resize the image 200x150px: <img style="width: 200px; height: 150px;" src="http://i.stack.imgur.com/wPh0S.jpg"> That gives me this: <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;"> </div> Gives me: <div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;"> </div> How can I do both? Resize the image and then cut it the size I want?

当前回答

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

.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>

2015-05-25 19:52:03

其他回答

有像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]

2017-01-25 19:53:15

我最近需要这样做。我想做一个缩略图链接到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%的像素。

So…

设置高度= 172 + 19 = 191像素: 身高= 191 设置底部边距为-19像素(将图像缩短为172像素高): margin-bottom: -19像素设置顶部位置为-19像素(将图像向上移动，以便顶部19像素的行溢出并隐藏，而不是底部的行): 前:-19像素

生成的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，所以这对我来说不是问题。

2017-10-22 20:52:50

如果您正在使用<img>标记，那么Object-fit可能会帮助您

下面的代码将为您裁剪图像。你可以尝试一下合身的衣服

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

2018-11-14 06:23:50

你也可以使用一个叫做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>

2021-03-22 08:20:00

<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*/
}

2014-02-28 11:29:32

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

推荐文章

最新文章

标签