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 - 不用调整大小的图像？

回答

相关问题