Question

我尝试了很少的链接但是dint得到了任何有益的结果。我正在研究这个

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

但在我的情况下，我需要将图像剪辑为“％”而不是放置一些预定义的px值。但是我不能这样做。

如何实现？

Answer 1

Clip property不支持百分比（尚未）。要达到这个效果，您可以：

1）将图像包裹在div中，设置百分比宽度和高度并溢出：隐藏;例如：

<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计算渲染图像后所需的宽度和高度，并使用它。

Answer 2

如果您想以百分比形式进行，可以使用额外的包装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。

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

2 个答案: