如何在寬度％和高度％上剪下圖像

我嘗試了幾個鏈接，但是得到了豐碩的成果。我工作的這個如何在寬度％和高度％上剪下圖像

http://www.w3schools.com/cssref/pr_pos_clip.asp

但對我來說，我需要夾在「％」，而不是把一些預定義的像素值的圖像。但我不能這樣做。

如何實現？

來源

2014-01-15 N.Nihar

檢查此http://stackoverflow.com/questions/8242222/using-css-clip-with-percentage –

Clip property不支持百分比（還）。要達到此效果，您可以：

1）將圖像包裝在div中，設置百分比寬度和高度並溢出：hidden;例如：

<div id="test"> 
    <img src="https://www.google.com/images/srpr/logo11w.png"> 
</div> 

div#test { 
    width: 200px; 
    height: 100px; 
    overflow: hidden; 
}

JSFiddle

2）代替的圖像，使用具有百分比的寬度和高度，並設置爲背景圖像的圖像一個div。

3）使用javascript來計算圖像渲染和處理後所需的寬度和高度。

來源

2014-01-15 06:46:23 user1853181

與此我將得到一個擠壓圖像，我想要的是從起源10％的寬度和10身高的百分比。 –

我推薦的3種方法中的哪一種你嘗試過？你試過其他兩個嗎？我已經包含了一個在我的答案中做你想要的東西的例子。 – user1853181

如果你想以百分比的方式做到這一點，你可以通過一個額外的大小與圖像相同的包裝div來實現。

請嘗試以下CSS和HTML。

HTML

<div class="wrapper"> 
    <div class="imgContainer"> 
     <!-- NOTE: image dimensions are same as in "wrapper" class--> 
     <img src="path/to/img.jpg" width="200" height="140" /> 
    </div> 
</div>

CSS

.wrapper{ 
    width : 200px; 
    height : 140px; 
} 
/* Below width and height are in percentage w.r.t. those in 
    'wrapper' class whose width and height are same as image. 
*/ 
.imgContainer{ 
    width : 50%; 
    height : 50%; 
    overflow : hidden; 
}

檢查這個fiddle。

來源

2014-01-15 08:11:44

如何在寬度％和高度％上剪下圖像

回答

相關問題