前端 - 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

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