Question

我想更改图像的src属性

$('.bact').attr('src', '00.jpg');

00.jpg与以前的尺寸不同。

是否可以更改src，但保持原始img的宽度和高度。

如果00.jpg小于原始大小，则应进行拉伸（质量的损失无关紧要）。

如果它更大-应该对其进行裁剪或其他操作，但目标是填充原始矩形。

有帮助吗？

Answer 1

您可以使用jquery的.width和.height获得原始图像的高度和宽度。然后，将这些高度和宽度css属性添加到<img />标记中，并更改其src。

第二张图像将具有与前一张图像相同的尺寸。例如：

setTimeout(changeImage, 3000);

function changeImage() {
  let $image = $(".bact");
  let width = $image.width();
  let height = $image.height();
  console.log(`original width: ${width} height: ${height}`);
  $image.css({"height": height, "width": width});
  $image.attr("src", "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Mausoleum_Ishrathona06.JPG/320px-Mausoleum_Ishrathona06.JPG");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img class="bact" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Mute_swans_%28Cygnus_olor%29_and_cygnets.jpg/640px-Mute_swans_%28Cygnus_olor%29_and_cygnets.jpg" />

在保持尺寸的同时更改图像源

1 个答案: