使用CSS調整圖像大小和裁剪尺寸

我有一個網站有一堆不同的圖像顯示，所有不同的分辨率和縱橫比。在CSS中有一種簡單的方法來調整圖像大小並將其裁剪爲某個分辨率？爲了我的目的，我想調整大小的圖像爲280x280。使用CSS調整圖像大小和裁剪尺寸

當然，我可以只設置<img height = '280' width = '280' />但這會拉伸它。我喜歡它的兩個決議中較小的一個，做一個正方形，然後採取中心像素。例如，如果分辨率是480x200，我希望它將200x200的部分放在圖像的中心之外。

我試過谷歌搜索，但無濟於事。

來源

2013-02-26 jas7457

我懷疑你可以n用CSS來做 – revolver 2013-02-26 07:39:12

如何使用php？我的網站使用PHP，所以這也是一個選項，除非它減慢了網站的速度。 – jas7457 2013-02-26 07:40:35

使用css的圖像「真正的作物」是不可能的。真正的作物意味着圖像被縮小到新的值，並且它的尺寸比之前更小。

但有一個負邊界或絕對定位的解決方案，這將幫助你很多。我多次使用過這種技術。

請看看： Cropping images with CSS

來源

2013-02-26 07:41:45 emjay

這看起來很有希望。我會檢查一下，看看我能否得到它的工作 – jas7457 2013-02-26 07:46:06

-1

你可以用CSS在網站上設置的所有圖像的大小：

img { 
    width: 280px; 
    height: 280px; 
}

的問題是，有些圖片看起來，因爲怪自己方面廣播。最好的事情是當你上傳時，會創建不同尺寸的每張圖片（更好地稱爲縮略圖）。 Noot在運行時，需要很長時間。

來源

2013-02-26 07:41:55 Chris

不要以爲你真的閱讀我的問題。我運行一個音樂博客，我需要一些動態縮放/裁剪每個帖子的圖片。正如我在我的問題中所說的，我不想讓他們舒展一下。 – jas7457 2013-02-26 07:44:15

是的，這就是爲什麼我告訴你必須通過PHP創建縮略圖;） – Chris 2013-02-26 07:45:39

你沒有告訴用戶是上傳圖片還是隻是鏈接它們。有一個很大的不同。 – Chris 2013-02-26 07:46:15

如果將圖像設置爲CSS背景，則可以使用background-size: cover|contain。

來源

2013-02-26 07:43:35 Rowno

您可以使用剪輯屬性來裁剪元素。

幾個星期前我在Codrops寫了一篇關於它的教程：http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/。

來源

2013-02-26 07:57:58

我最近遇到了同樣的問題，最後以一種與背景圖像方式稍有不同的方式結束了。另一個主要區別是，我的方式並不假設知道圖像的寬度和高度 - 所以它可以動態地與任何圖像一起工作。它確實需要一點點jQuery來確定圖像的方向（我相信你可以使用普通的JS來代替）。

我寫了一個blog post about it如果你有興趣瞭解更多的解釋，但該代碼非常簡單：

HTML：

<ul class="cropped-images"> 
    <li><img src="http://fredparke.com/sites/default/files/cat-portrait.jpg" /></li> 
    <li><img src="http://fredparke.com/sites/default/files/cat-landscape.jpg" /></li> 
</ul>

CSS：

li { 
    width: 150px; // Or whatever you want. 
    height: 150px; // Or whatever you want. 
    overflow: hidden; 
    margin: 10px; 
    display: inline-block; 
    vertical-align: top; 
} 
li img { 
    max-width: 100%; 
    height: auto; 
    width: auto; 
} 
li img.landscape { 
    max-width: none; 
    max-height: 100%; 
}

的jQuery：

$(document).ready(function() { 

    $('.cropped-images img').each(function() { 
     if ($(this).width() > $(this).height()) { 
     $(this).addClass('landscape');   
     } 
    }); 

});

來源

2014-02-25 20:28:13 FreddyBushBoy

使用CSS調整圖像大小和裁剪尺寸

回答

相關問題