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

其他回答

生活例子: https://jsfiddle.net/de4Lt57z/

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);
      }

解释: 在这里，图像是根据图像的宽度和高度值调整大小。裁剪是通过剪辑属性完成的。

有关剪辑属性的详细信息请参见: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/

2016-04-17 03:21:10

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

2015-05-12 04:51:40

在之前的答案中增加了一个小的内容，包括对象合身:封面:

对象的位置

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

.trimmed-cover { object-fit:封面; 宽度:100%; 身高:177 px; 物体位置:中心40%; ｝ <img class="trim -cover" src="http://i.stack.imgur.com/wPh0S.jpg">

2021-04-26 10:23:11

使用CSS3，可以通过background-size来改变背景图像的大小，同时实现这两个目标。

在css3.info上有很多例子。

基于您的示例实现，使用donald_duck_4.jpg。在本例中，background-size: cover;正是你想要的-它适合背景图像覆盖整个区域的包含<div>和剪辑多余的部分(取决于比例)。

.with-bg-size { 背景图片:url (https://i.stack.imgur.com/wPh0S.jpg); 宽度:200 px; 身高:100 px; 背景位置:中心; /*使背景图像覆盖<div>的区域，并剪辑多余的*/ background-size:封面; ｝ <div class="with-bg-size">唐老鸭!< / div >

Css3 background-image background-size

2012-02-05 12:17:45

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

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

推荐文章

最新文章

标签