如何修剪CSS中的圖像？

好的，這是問題所在，我的應用程序允許用戶插入任何圖像。這是由他們插入非常大或非常長的圖像。但是，當我租賃圖像我想要width="50px"和height="100px"。如何修剪CSS中的圖像？

確定的，如果我這樣做

.myImage{ 
    width:50px; 
    height:100px; 
}

那麼圖像可能被扭曲COS的比例是不準確的。所以，這是我的想法。首先，我想圖像有width:50px然後如果height>100px，那麼CSS將修剪底部。好吧，讓我們來看看這個例子，用戶插入一個大的圖片width=150px和height=600px。所以如果我把寬度減小到50px，高度將會是200px。我希望削減圖像的底部，所以它只會顯示(w: 50px, h: 100px)看到的畫面：

enter image description here

那麼怎麼辦呢？

來源

2014-09-29 Tum

在上傳過程中裁剪圖像會更好 - 如果您通過CSS縮放/裁剪大圖像，您的加載速度將會受到影響。但是如果你不關心這個問題，你可以使用'overflow：hidden'設置將圖像打包在一個div所需的大小，或者將其設置爲背景圖像並更改背景位置。 – Novocaine 2014-09-29 14:07:10

可能重複[調整圖像與CSS成比例？]（http://stackoverflow.com/questions/787839/resize-image-proportionally-with-css） – ExCluSiv3 2014-09-29 14:09:11

使用background-image css屬性，而不是img標記。（當然，如果img不是設計的一部分，並且你不需要語義:)） – Kinga 2014-09-29 14:10:15

1）修剪圖像與<div>和overflow:hidden：

div.trim { 
    max-height:100px; 
    max-width: 50px; 
    overflow: hidden; 
} 

<div class="trim"><img src="veryBigImage.png"/></div>

2）使用max-width: 50px;和max-height: 100px對圖像本身。所以圖像將保留它的尺寸

來源

2014-09-29 14:15:59 Justinas

完美的兄弟，非常感謝你 – Tum 2014-09-29 14:28:52

你需要把圖像中所需的實際尺寸的容器overflow:hidden

HTML：

<div id="container"><img src="myimage.jpg"/></div>

CSS：

#container {width:50px;height:100px;overflow:hidden} 
#container img {width:50px;}

來源

2014-09-29 14:07:35 MeLight

通過使用最大寬度和MAX-高度，你可以將高度設置爲任何你想要的和完整的圖像將顯示。

.myImage{ 
    height:auto; 
    width:auto; 
    max-width:300px; 
    max-height:300px; 
}

來源

2014-09-29 14:08:10 ExCluSiv3

你可以用div包裹img和應用overflow: hidden;

HTML：

<div class="img-wrapper"> 
    <img src="path/to/image.jpg" /> 
</div>

CSS：

.img-wrapper{ 
    max-height: 100px; 
    overflow: hidden; 
} 

.img-wrapper img{ 
    width: 50px; 
}

來源

2014-09-29 14:08:58 Jmh2013

我會建議使用CSS CLIP屬性來修剪到你想要的大小。

img { 
position: absolute; 
clip: rect(0px,50px,100px,0px); 
width:50px; 
}

這樣，如果圖像足夠小，沒有東西會被切斷。否則，你把它裁掉。

來源

2014-09-29 14:09:19 starvator

如何修剪CSS中的圖像？

回答

相關問題