如何在宽度％和高度％上剪下图像

我尝试了几个链接，但是得到了丰硕的成果。我工作的这个如何在宽度％和高度％上剪下图像

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

如何在宽度％和高度％上剪下图像

回答

相关问题