javascript - CSS - サイズを変更せずに画像をカットしますか?

Question

たとえば、500x500 の大きな画像と 100x100 の小さな正方形があります。

大きな画像のサイズを変更したくないので、どうすれば切り取って表示できますか?

サイズを大きくすると、次のようになります。

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

私がそれを切り取ると、大胆なことだけが起こります:

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

Answer 1

この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 2

その画像の幅と高さを指定できます

例：

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