html - 使用 CSS 调整和裁剪图像

标签 html css image-processing crop

我的网站有一堆不同的图像要显示,所有这些图像的分辨率和纵横比都不同。 CSS 中是否有一种简单的方法可以将图像调整大小和裁剪到特定分辨率?出于我的目的,我希望调整后的图像为 280x280。

当然我可以设置<img height = '280' width = '280' />但这会拉伸(stretch)它。我想要两个分辨率中较小的那个,做一个正方形,然后取中心像素。例如,如果分辨率为 480x200,我希望它从图像中心取出 200x200 的部分。

我试过谷歌搜索,但无济于事。

最佳答案

不可能使用 CSS 对图像进行“真实裁剪”。真正的裁剪意味着图像被缩小到新的值,而且它的尺寸也比以前小。

但是有一个负边距或者绝对定位的解决方案,会对你有很大的帮助。我已经多次使用这种技术。

请看: Cropping images with CSS

关于html - 使用 CSS 调整和裁剪图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15083789/

相关文章:

javascript - onclick 监听器仅按特定顺序工作?

php - 如何在ie7中设置兼容性 View ?

html - 如何调整在不同浏览器和屏幕尺寸中自动加载的图像尺寸?

Matlab SURF指向像素坐标

html - 我可以使用同一个 anchor 链接到多个元素吗?

python - 使用 STATICFILES_DIRS 而不是 STATIC_URL 时加载静态 css 和 js

html - 悬停时如何更改表数据单元背景颜色和数据单元内的链接文本

internet-explorer-9 - ie9 中的边框半径在元素中产生清晰的线条(图片链接以供引用)

python - 用pytesseract读取低分辨率图像

image - 将图像置于另一图像的黑色像素中