我有一个html页面,中间有一张照片 有没有办法用javascript缩小图像,以防它对于当前的显示器分辨率来说太大了?
我的意思是如果分辨率为1600 * 1200的用户打开1900 * 1200的图像,则应缩小图像以适合窗口。
我可以使用jquery
答案 0 :(得分:4)
为什么不使用css?
.imgresize {
max-width: 100%;
max-height: 100%;
}
答案 1 :(得分:1)
请看这里:Image resize to fit screen
其他:http://jsfiddle.net/jsNDW/1/
HTML
<img src="http://placehold.it/1950x550" class="imgresize">
和JQUERY
var wWidth = $(window).width();
var wHeight = $(window).height();
$('.imgresize').each( function() {
var imgWidth = $(this).width();
var imgHeight = $(this).height();
if(imgWidth > wWidth)
{
$(this).width(wWidth);
}
if(imgHeight > wHeight )
{
$(this).width(wHeight);
}
});
$(window).resize(function() {
var wWidth = $(window).width();
var wHeight = $(window).height();
$('.imgresize').each( function() {
var imgWidth = $(this).width();
var imgHeight = $(this).height();
if(imgWidth > wWidth)
{
$(this).width(wWidth);
}
if(imgHeight > wHeight )
{
$(this).height(wHeight);
}
});
});