首页   技术笔记   网址导航   Json在线解析   二维码   Ip地址查询   在线流程图  
新用户注册 | 会员登录
当前位置:  开发笔记 > 编程语言 > 正文

CSS显示调整大小和裁剪的图像

作者：mobiledu2402852413 | 2023-08-31 12:56
如何解决《CSS显示调整大小和裁剪的图像》经验，为你挑选了8个好方法。

我想显示具有一定宽度和高度的URL中的图像,即使它具有不同的大小比例.所以我想调整大小(保持比例),然后将图像剪切到我想要的大小.

我可以用html img属性调整大小,我可以用background-image.
我怎么能两个都做？

例:

这个图片:

在此输入图像描述


有大小800x600像素,我想像200x100像素的图像一样显示


随着img我可以调整图像200x150px:


这给了我这个:


并且background-image我可以剪切图像200x100像素.

 

给我:

 


我怎么能两个都做？
调整图像大小,然后将其剪切为我想要的大小？



1> roborourke..：

您可以使用两种方法的组合,例如.

    .crop {
        width: 200px;
        height: 150px;
        overflow: hidden;
    }

    .crop img {
        width: 400px;
        height: 300px;
        margin: -75px 0 0 -100px;
    }

CSS:

    

        Donald Duck

你可以使用负片margin来移动图像

.

只是其他人的注意事项:.crop高度和宽度定义了切割图像最底部和最右边部分的位置..crop img的高度和宽度将缩放图像..crop img margin将平移图像
请注意,如果在包含的图像上设置position:relative,则需要在包含div上设置position:relative.如果你不这样做,我发现IE实际上不会剪辑图像.
另请注意,使用css裁剪图像时,用户仍需下载图像.在将图像发送给用户之前,最好使用php和GD或其他图像编辑库来调整图像大小和裁剪图像.这一切都取决于你想要什么,加载服务器或用户带宽.

2> Joel Purra..：

随着CSS3这是可以改变的大小background-image用background-size,实现这两个目标的一次.

css3.info上有很多例子.

根据您的示例实现,使用donald_duck_4.jpg.在这种情况下,background-size: cover;正是你想要的 - 它适合background-image覆盖整个包含区域

并剪掉多余的部分(取决于比例).

.with-bg-size {
  background-image: url('https://img.devbox.cn/3cccf/16086/243/89e8e7df87d832a6.png');
  width: 200px;
  height: 100px;
  background-position: center;
  /* Make the background image cover the area of the 
, and clip the excess */
  background-size: cover;
}
Donald Duck!

css3 background-image background-size

是否可以使用`img`标签进行此操作？
对于``标签,请查看[`object-fit:cover`](https://developer.mozilla.org/en/docs/Web/CSS/object-fit)和来自[CSS的相关值图像值和替换内容模块级别3规范](https://drafts.c​​sswg.org/css-images-3/#the-object-fit).

3> Anatolii Ste..：

你试过用这个吗？

CSS

我需要调整图像大小,居中(垂直和水平)并裁剪它.

我很高兴地发现,它可以在单个css-line中完成.请查看此处的示例:http://codepen.io/chrisnager/pen/azWWgr/？edit = 110

以下是该示例的代码HTML和CSS代码:

CSS: 

.centered-and-cropped { object-fit: cover }


HTML: 

.centered-and-cropped { object-fit: cover }

谢谢,我认为这是最容易和最普遍的方式 - 但它似乎不适用于IE:/在这里查找文档:https://developer.mozilla.org/de/docs/Web/CSS/对象的合
IE11或EDGE不支持CSS3对象(14)http://caniuse.com/#feat=object-fit

4> 小智..：
.imgContainer {
  overflow: hidden;
  width: 200px;
  height: 100px;
}
.imgContainer img {
  width: 200px;
  height: 120px;
}

包含div基本上通过隐藏溢出来裁剪图像.



5> 小智..：
img {
  position: absolute;
  clip: rect(0px, 140px, 140px, 0px);
}



6> Pedro Reis..：

谢谢sanchothefat.

我对你的答案有所改进.由于裁剪非常适合每个图像,因此这个定义应该是HTML而不是CSS.



7> 151291..：
img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
}



8> Hidayt Rahma..：

object-fit如果您正在玩标签，可能会对您有所帮助

以下代码将为您裁剪图像。您可以玩适合对象的游戏

img {
  object-fit: cover;
  width: 300px;
  height: 337px;
}

推荐阅读
devbox
mobiledu2402852413
这个屌丝很懒，什么也没留下！
关注作者
Tags | 热门标签
RankList | 热门文章
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有