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

Question

有这么个需求：
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也是不完全支持的，所以目前来看，使用背景定位比较好！

Answer 1

CSS is also possible. The image path provided by the backend is output as an inline style and becomes the background of p
That is, background: url(xxxxx) no-repeat;

Add background-size:cover to p...

Answer 2

If it is img
You can use object-fit:cover;
If it is a background image
You can use background-size:cover;

Answer 3

No, you need to use 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);
}

Answer 4

You center this image horizontally and vertically in this p

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

Then set the picture

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

Remember not to set the width and height attributes.
The above is untested. You can try it out and the success rate should be okay.

Answer 5

If the width of the picture is not set, it will automatically be filled with the parent width. That is to say, if you set the width of p and put an img tag in it without setting the width, the width of the picture will be equal to the width of p, and the height will automatically scale proportionally

Answer 6

Is there a way to turn the image into a background image with better compatibility?