问

前端 - css可以设置图片以最短边为依据展示在父级中吗？

平凡天使zj 发布于 2022-11-05 08:49

有这么个需求：
p里有个img标签，图片是从后台传过来的，宽高不定，长度不定，而p是个写死了宽高的一个正方形，
需求是，不论图片宽高多少，比例是什么样子，让图片充满p，且图片不能走形。
因为p宽高是定死的正方形，为了保证不走形，有一种相对妥协的实现方案是让图片的中心部位显示在p中来展示。

那么问题来了
我让IMG宽度100%，如果图片实际的高>宽，图片可以充满p并且中心部分展示,但是遇到高<宽的图片，我让IMG宽度100%，图片在p里不能完全展示，可能在垂直方向上，上下会有留白出现。

我想如果css有一种方法可以依据一张图片宽高中最短的一边为依据灵活设置宽高，那么这个问题就能完美解决了。。

以最长边为依据展示图片，可以使用 max-width 和 max-height来做，
我想问css有没有办法依据一张图片宽高中最短的一边为依据灵活展示图片呢？

感谢大家的帮助，我最终采纳了@banri的答案，感谢@banri！
@耗油牛肉盖浇饭的答案最全，但是考虑回答的先后，和细节的描述，我决定还是采纳了@banri的！也很感谢你！

有好东西不敢独享，一个简单的demo 分享给大家吧：

p{
width:100px;
height:100px;
background:url('6.jpg') no-repeat center;
background-size: cover;
}

这样就可以实现无论p尺寸如何变化，比如移动端上用百分比或box设置的自适应宽高的标签，图片的中心部位都会在p的正中显示了，并且图片填充p也不会变形。

一般实际工作中，图片是后台返回来的，所以上述样式写在行内样式中即可，这里这么写比较直观好看！

对于object-fit也能实现上述效果，之前没听过 =。= ！又get个新技能！但是它的兼容性是使用它的最大阻碍

IE完全不支持，而移动端safari也是不完全支持的，所以目前来看，使用背景定位比较好！

6 个回答

有没有不是让图片变成背景图片，同时兼容性比较好的方法？

2022-11-09 10:29 回答

mobiledu2502869153
图片如果没有设置宽度，会自动采用父级宽度填充，也就是说你p设了宽度，里面放个img标签不设宽，图片宽度是会等于p宽度的，高度自动等比例缩放

2022-11-09 10:35 回答

望舒灬寒

你让这个图片在这个p中水平垂直居中

cssp {
    font-size: 0;
}
p>* {
    font-size: 1rem;
    display: inline-block;
    vertical-align: middle;
}
p::before {
    content: '';
    height: 100%;
    width: 0;
}

然后设置图片

cssimg {
    max-width: 100%;
    max-height: 100%;
}

切记不能设置width和height属性。
以上是未经实验的，楼主可以实验一番，成功率应该还可以。

2022-11-09 10:46 回答

书尧佳蓉21

没有，要用js

javascriptpath = 'path/to/image';
container = document.getElementById('p_id');
img = document.createElement('img');
img.src = path;

// 这里需要等图片载入之后才能进行后续操作，否则会有问题
img.onload = function () {
    if(img.width > img.height){
        img.style.width = img.width;
    }else{
        img.style.height = img.height;
    }
    container.appendChild(img);
}

2022-11-09 10:47 回答

如果是img
可以使用object-fit:cover;
如果是背景图
可以使用background-size:cover;

2022-11-09 10:48 回答

熊金涟_473
CSS也是可以的，将后端提供的图片路径输出为行内样式，变为p的背景
也就是background: url(xxxxx) no-repeat;

再给p加上background-size:cover即可……

2022-11-09 11:01 回答

tbc5052661

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签