CSS - 不用調整大小的圖像？

例如我有一個大的圖像500x500，我有一個小方形100x100。CSS - 不用調整大小的圖像？

我不希望調整大圖像，所以我怎麼能顯示它切割？

如果我升級，它會保持這樣：

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

如果我砍它，只有大膽的事情會happear：

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

來源

2013-06-24 John Balls

+1克服-1票。有些人傾倒，不仔細閱讀問題，並立即回答腹瀉。 –

ahhahaaa yeaa .. –

如果你願意，你可以使用CSS使用background-image性質，而且比使用background-position設置圖像相應

假設你有發言權的元素，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 */ 
}

來源

2013-06-24 07:52:24

好主意，謝謝 –

@JohnBalls歡迎您:) –

您可以使用jQuery自動化進程，併爲這些類型的圖像添加一個特殊的類。用透明gif替換'src' attr，並使用jQuery從原始源應用背景。 –

我可以肯定試試這個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; 
}

來源

2013-06-24 07:53:51 falguni

什麼是IMG餘地？ –

，您可以給寬度和高度爲圖像

例子：

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

來源

2013-06-24 07:54:05

來吧，專注於答案 - ' –

它對你有用嗎？ –

您可以將圖像作爲背景應用於某個元素，並修復該元素的寬度/高度。

Demo

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

來源

2013-06-24 07:54:29 mishik

簡單的方法來做到這一點是

HTML：

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

CSS：

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

來源

2013-06-24 07:54:48 jackchuka

你可以在回答同樣的事情之前閱讀其他答案 –

我想大家都在同一時間回答 – jackchuka

CSS - 不用調整大小的圖像？

回答

相關問題