如果宽度大于原始图像，请更改图像src

Change image src if the width is larger then original image

本文关键字：图像 src 如果 大于 原始      更新时间：2023-09-26

我有一个应用程序，它通过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;"/>`

但是，如果图像的宽度小于430px，应用程序会扩展图像，可能会对其进行扭曲或像素化

有没有办法检查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 );
}

这是一种丑陋的方法（而且可能很慢，因为它可能同时加载两个图像），但我不确定是否有更优雅的方法在客户端实现这一点。

尝试：

var teste_img = document.getElementById('teste'); 
var teste_width = teste_img.clientWidth;
var medium_img = document.getElementById('medium'); 
var medium_width = teste_img.clientWidth;

if(test_width > medium_width ){
    $('img').attr('src', '../img/fotos/4larger.jpg');
}else{
    $('img').attr('src', '../img/fotos/4medium.jpg');
}
相关文章：