如何在宽度百分比和高度百分比上剪辑图像

Posted 2023-02-25

【中文标题】如何在宽度百分比和高度百分比上剪辑图像

【英文标题】：How to clip an image on % of width and % of height

【发布时间】：2014-01-15 06:40:48

【问题描述】：

我尝试了几个链接，但没有得到任何成果。 我正在处理这个

http://www.w3schools.com/cs-s-ref/pr_pos_clip.asp

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

如何做到这一点？？

【问题讨论】：

查看***.com/questions/8242222/…

【参考方案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 计算图像渲染后所需的宽度和高度并进行处理。

【讨论】：

有了这个我会得到一个压缩的图像，我想要的是从原点开始 10% 的宽度和 10% 的高度。

我推荐的 3 种方法中，您尝试了哪一种？你试过其他两个吗？我在回答中包含了一个示例，可以满足您的要求。

【参考方案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"   />
    </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。