css3 - 图片等比例缩放
PHP中文网
PHP中文网 2017-04-17 11:34:17
[CSS3讨论组]

要将千奇百怪(尺寸)的图片放在一个固定宽高的p/a标签中,如何保持图片不变形以及能让用户看到关键信息(裁剪掉冗余部分),其实我个人想法是对上传过来的图片统一压缩成我想要的尺寸,这个怎么实现?

PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(2)
黄舟

不确定你需要的关键信息是什么,但是如果这里的关键信息都包含了图片的“中央”,那么居中显示图片即可,给固宽高的元素指定background。以下就是让图片等比居中布满整个元素,多余的部分会被裁减:

.image-container {
    ...
    background-image: url(your/path/to/image.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    ...
}
ringa_lee

如果你图片在一个p标签里面,而这个p又设置好了高宽,可以通过设置图片的background-size:100% 100%,来将图片根据p的高宽实现自适应……

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号