我有一个通过 html 定义图像宽度的应用程序,如下所示:
↓↓↓↓↓↓↓↓↓↓↓↓
<img id="teste" class="item" src="../img/fotos/4medium.jpg" style="width: 430px; display: block; margin-top: -7px; margin-left: 0px; max-width: 9999em; height: auto;"/>`
但是,如果图像的宽度小于 430 像素,应用程序会扩展图像,可能会使其变形或像素化。
有没有办法检查style="width"
是否大于原始图片宽度,如果是,则将src更改为另一个图像?
我认为它应该看起来像这样:
if ($('#teste').width() > $(4medium.jpg).width()) {
$('img').attr('src', '../img/fotos/4larger.jpg');
} else {
$('img').attr('src', '../img/fotos/4medium.jpg');
}
提前致谢。
最佳答案
理想情况下,您可以使用服务器上的脚本检查这一点(因为否则您可能必须将两个图像下载到客户端)。像这样的东西应该有效:
var testImg = new Image();
testImg.src = '../img/fotos/4medium.jpg';
testImg.onLoad = check_image_size( testImg );
然后测试宽度,看看是否需要加载较大的图像:
function check_image_size( obj ) {
var url = obj.src;
if ( obj.width > 430 )
url = '../img/fotos/4larger.jpg';
$('#teste').attr( 'src', url );
}
这是一种丑陋的方法(并且可能很慢,因为它可能会加载两个图像),但我不确定是否有更优雅的方法在客户端执行此操作。
关于javascript - 如果宽度大于原始图像,则更改图像 src,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17386114/