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

Question

有这么个需求： div里有个img标签，图片是从后台传过来的，宽高不定，长度不定，而div是个写死了宽高的一个正方形， 需求是，不论图片宽高多少，比例是什么样子，让图片充满DIV，且图片不能走形。 因为div宽高是...

伊谢尔伦 · Answer

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

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

天蓬老师 · Answer

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

PHPz · Answer

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

你让这个图片在这个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

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

伊谢尔伦 · Answer

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