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

Question

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

伊谢尔伦 · Answer

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

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

PHPz · Answer

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

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

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

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