Question

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

我不希望大图像调整大小，所以我怎么能显示它被切割？

如果我上升，它会像这样：

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

如果我剪掉它，只会发生大胆的事情：

| ---- --- |
的 | ---- --- |
| ------- |
| ------- |

Answer 1

如果需要，可以使用CSS使用background-image属性，然后使用background-position相应地设置图像

假设您有一个单词say 100px x 100px和尺寸为300px x 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

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

Demo

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

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

5 个答案: