如何把一张长宽不定的图片等比例缩放到一个div中

Viewed 2284

题目描述

现在我有一个宽200px高100px的div,还有一张宽高不定的图片
可能情况有
1.图片宽高都小于div 例:50*50那么我直接放进去就行,不进行缩放
2.图片宽大于div高小于div,例300*50 那么我就要根据 宽度去缩放1.5倍 高度auto
3.图片高大于div宽小于div,例50*300 那么我就要根据 高度去缩放3.0倍 宽度auto
4.图片宽高都大于div,那么又有两种情况

4.1图片宽比 比 高比大,例500*200 那么要根据宽度缩放2.5倍 高度auto
4.2图片高比 比 宽比大,例300*500 那么要根据高度缩放5.0倍 宽度auto

请问如何编辑一段优雅的代码,

相关代码

我的代码如下...小生不才 都是一个个判断的...四种超界情况对应四个判断,
var img_width = img.width();//图片宽度
var img_height = img.height();//图片高度
var modal_width = 200;//div宽度
var modal_height = 100;//div高度
2.图片宽大于div高小于div
if (img_width > modal_width && img_height < modal_height) {

           
            img.css('width', img_width + 'px');

}
3.图片高大于div宽小于div
if (img_height > modal_height && img_width < modal_width) {

            
            img.css('height', img_height + 'px');

}
if (img_height > modal_height && img_width > modal_width) {

    4.2图片高比 比 宽比大
    if ((img_height / modal_height) > (img_width / modal_width)) {
            
            img.css('height', img_height + 'px');
    } else {
    4.1图片宽比 比 高比大
            img.css('width', img_width + 'px');
        }
    }

你期待的结果是什么?实际看到的错误信息又是什么?

1 Answers