【问题标题】:How to Center Crop an Images on Web using CSS/JS如何使用 CSS/JS 在 Web 上居中裁剪图像
【发布时间】:2012-03-12 01:13:01
【问题描述】:

有一些不同尺寸的图片,我想用它们制作一些缩略图。如果我使用溢出:隐藏输出图像将是原始图像的左上角,而我希望它是图像的确切中心,就像我想要的像素一样。一直在寻找这个,但实际上什么都没有有用...

【问题讨论】:

    标签: javascript css web


    【解决方案1】:

    除了使用img,您可以使用div 将图像作为背景,并使用CSS background-position 属性将其居中。或者,您可以在 divoverflow: hidden 中使用 img,并在图像上使用边距使其居中。

    但仅供参考,缩略图应该在服务器端生成,否则无论如何您都会发送整个图像。

    【讨论】:

    • 感谢您提供的信息,但它仍然处于离线状态并且没有服务器可以执行此操作,另外我确实想发送整个图像然后调整它的大小,因为用户会打开图像.这个 div 方法很好很简单,谢谢。任何其他方法也会很棒,因为我必须编辑整个脚本以使图像 div 背景...
    【解决方案2】:

    那么,您的缩略图只是整个图像的一小部分吗?为什么不在服务器中调整图像大小并将其显示在具有预定义大小的图像标签内?如果您的图像不是很大,您可以跳过服务器端调整大小,只需执行以下操作:<img src="image.jpg" alt="Some image" height="42" width="42" />。只需将图像大小更改为您喜欢的大小即可。

    【讨论】:

    • 好吧,它打破了比例,图像看起来像一团糟,但是,还是谢谢你:)
    猜你喜欢
    • 2021-06-05
    • 2018-04-13
    • 2021-11-24
    • 2019-12-10
    • 2014-11-30
    • 1970-01-01
    • 1970-01-01
    • 2012-07-18
    相关资源
    最近更新 更多