扫码关注官方订阅号
要将千奇百怪(尺寸)的图片放在一个固定宽高的p/a标签中,如何保持图片不变形以及能让用户看到关键信息(裁剪掉冗余部分),其实我个人想法是对上传过来的图片统一压缩成我想要的尺寸,这个怎么实现?
认证高级PHP讲师
不确定你需要的关键信息是什么,但是如果这里的关键信息都包含了图片的“中央”,那么居中显示图片即可,给固宽高的元素指定background。以下就是让图片等比居中布满整个元素,多余的部分会被裁减:
.image-container { ... background-image: url(your/path/to/image.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; ... }
如果你图片在一个p标签里面,而这个p又设置好了高宽,可以通过设置图片的background-size:100% 100%,来将图片根据p的高宽实现自适应……
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
扫描下载App
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
不确定你需要的关键信息是什么,但是如果这里的关键信息都包含了图片的“中央”,那么居中显示图片即可,给固宽高的元素指定background。以下就是让图片等比居中布满整个元素,多余的部分会被裁减:
如果你图片在一个p标签里面,而这个p又设置好了高宽,可以通过设置图片的background-size:100% 100%,来将图片根据p的高宽实现自适应……