题目描述
现在我有一个宽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');
}
}
