javascript - CSS - 剪切图像而不调整大小？

Question

例如，我有一个 500x500 的大图像和一个 100x100 的小正方形。

我不想调整大图像的大小，那我怎么能把它剪掉呢？

如果我扩大规模，它会保持这样的状态：

|-------|
|-------|
|-------|
|-------|

如果我剪掉它，只会出现粗体：

|---- ---|
|---- ---|
|-------|
|-------|

Answer 1

如果需要，您可以使用background-imageCSS 属性，而不是使用background-position相应地设置图像

假设您有一个元素100pxx100px和一个尺寸为300pxx的图像300px

HTML

<div class="demo"></div>

CSS

div.demo {
   background-image: url('PATH_TO_IMAGE');
   background-position: 30px 100px; 
   background-repeat: no-repeat; /* Just to be sure it won't repeat, 
                                    even if you resize the element*/
   /* 30px - X Axis, 100px - Y Axis */
}

Answer 2

简单的方法是

html：

<div id="myimg"></div>

CSS：

 #myimg{
        backgroung-image: url("myimg.png");
        background-repeat: no-repeat;
    }

Answer 3

我可以试试这个html源吗

<div class="cropimg">
    <img src="..." alt="..." />
</div>

试试这个 CSS 源代码：

.cropimg{
    width: 100px ;
    height: 100px;
    overflow: hidden;
    background-color:blue;
}

.cropimg img {
    width: 500px;
    height: 500px;
    margin: -75px 0 0 -100px;
    background-color:red;
}

Answer 4

您可以为该图像提供宽度和高度

例子：

div.img{
        width:100px;
        height:100px;
        padding:0px;
        margin:0px;
        }

Answer 5

您可以将图像作为背景应用到某个元素，并修复该元素的宽度/高度。

演示

#pic {
    background: url('pic_url');
    width: 300px;
    height: 200px;
}