前端 - 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也是可以的，將後端提供的圖片路徑輸出為行內樣式，變成p的背景
也就是background: url(xxxxx) no-repeat;

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

Answer 2

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

Answer 3

沒有，要用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

你讓這張圖片在這個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屬性。
以上是未經實驗的，樓主可以實驗一番，成功率應該還可以。

Answer 5

圖片如果沒有設定寬度，會自動採用父級寬度填充，也就是說你p設了寬度，裡面放個img標籤不設寬，圖片寬度是會等於p寬度的，高度自動等比例縮放

Answer 6

有沒有不是讓圖片變成背景圖片，同時相容性比較好的方法？