html - 如何按宽度百分比和高度百分比裁剪图像

Question

我尝试了几个链接，但都没有取得任何成果。 我正在研究这个

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

但在我的例子中，我需要在“%”上裁剪图像，而不是放置一些预定义的 px 值。 但是我不能这样做。

如何实现？？

Answer 1

Clip property不支持百分比(还)。要实现该效果，您可以:

1) 将图片包裹在一个div中，设置百分比宽高和overflow: 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 计算所需的宽度和高度并使用它。