WordPress Elementor自定义随机图片代码如何设置图片最大宽度

你不需要改动现有随机取图、对应链接跳转的核心逻辑，只需要在拼接生成img标签的位置给图片加尺寸约束样式即可，同时修复了你原代码里容易触发报错的问题。

你原代码里写的<!DOCTYPE html>、<html>、<head>、<body>这类全局文档标签在Elementor HTML小工具里不需要保留——HTML小工具的内容是直接嵌入到现有WordPress页面结构内的，保留这类标签反而可能打乱页面布局。

修改位置 #

找到你原有代码里拼接img字符串的代码行：

var img = '<a href=\"' + imageLinks[dataIndex] + '"><img src="';

在<img>标签内添加style属性，写入宽度控制规则即可。

修改后可直接使用的完整代码 #

把HTML小工具里的原有内容全部替换为下面的代码即可，其中max-width的数值可以根据你的布局需求自行调整：

<script type="text/javascript">
  // 按顺序填入你的图片地址，注意使用英文半角引号
  var imageUrls = [
       "图片1的地址",
       "图片2的地址",
       "图片3的地址"
  ];
  // 按和图片一一对应的顺序填入跳转链接
  var imageLinks = [
       "图片1对应跳转链接",
       "图片2对应跳转链接",
       "图片3对应跳转链接"
  ];

  function getImageHtmlCode() {
    var dataIndex = Math.floor(Math.random() * imageUrls.length);
    var img = '<a href=\"' + imageLinks[dataIndex] + '\"><img src="';        
    img += imageUrls[dataIndex];
    // 下方style属性内即为尺寸控制规则
    img += '\" alt=\"\" style="max-width: 500px; height: auto; display: block; margin: 0 auto;"/></a>';
    return img;
  }
</script>
<script type="text/javascript">
  document.write(getImageHtmlCode());
</script>

样式参数调整说明 #

你可以根据实际页面需求修改style属性内的配置：

• max-width: 500px：核心配置，控制图片最大显示宽度，图片实际宽度超过该值时会自动缩放，小尺寸图不会被强行放大；如果需要适配模块宽度可以改成max-width: 100%
• height: auto：宽度缩放时高度自动按原图比例适配，避免图片拉伸变形
• display: block; margin: 0 auto：可选配置，作用是让图片在模块内居中显示，不需要居中可以直接删除这两个参数

注意：原代码里的引号是中文全角格式，直接运行会触发JS报错，填入自己的图片、链接地址时，请保持所有代码里的引号为英文半角格式。

内容的提问来源于stack exchange，提问作者Christina