Question

我有一个图片和一个Cloudinary上传小部件。小部件在屏幕上显示为一个按钮，带有一个href和几行javascript。我想将小部件按钮直接放在图像的顶部，但是我很难正确地进行格式化。这些都在Strikingly网站上托管。

<div id="picture" data-reactid="107">

<img
width="600"
height="600"
src="//res.cloudinary.com/hrscywv4p/image/upload/c_limit,h_9000,w_1200,f_auto/v1/7607/107c9c89-b233-482f-8f88-a106232d0f79_4_tidnqb.png"
class="lazyautosizes lazyloaded"
data-src="//res.cloudinary.com/hrscywv4p/image/upload/c_limit,h_9000,w_1200,f_auto/v1/7607/107c9c89-b233-482f-8f88-a106232d0f79_4_tidnqb.png"
data-sizes="auto"
data-reactid="108"
sizes="600px">

      <input style="position:absolute;width:80px;left:120px;top:180px;"

        <a href="#" id="opener"></a>

        <script type="text/javascript">
        $("#opener").cloudinary_upload_widget({
          cloud_name: "CloudicusNamicus",
          upload_preset : "preset",
          cropping: "server",
          cropping_aspect_ratio: "1",
          cropping_show_dimensions: "true",
          theme: "white",

          // pixels
          max_image_width: 1055,
          max_image_height: 1055,
          min_image_height: 350,
          min_image_width: 350,

          gravity: "custom",
          moderation: "webpurify",
          thumbnail_transformation : 'g_center,l_old-overlay.png,fl_relative,w_1.0,h_1.0/c_scale'
        }), function(error, result) {console.log(error, result)};

        </script>
      </input>
</div>

Answer 1

这里简单的解决方案。结果我只需要对齐图像，添加几个换行符，然后放下它下面的按钮。

<div align="center" ><img src="//res.cloudinary.com/hrscywv4p/image/upload/c_limit,h_9000,w_1200,f_auto/v1/7607/107c9c89-b233-482f-8f88-a106232d0f79_4_tidnqb.png" data-sizes="auto" data-reactid="108" sizes="400px">

<div id="button" align="center">

  <a href="#" id="opener"></a>

    <script type="text/javascript">
    $("#opener").cloudinary_upload_widget({
      cropping: "server",
      cropping_aspect_ratio: "1",
      cropping_show_dimensions: "true",
      theme: "white",

      // pixels
      max_image_width: 1055,
      max_image_height: 1055,
      min_image_height: 350,
      min_image_width: 350,

      gravity: "custom",
      moderation: "webpurify",
      thumbnail_transformation : 'g_center,l_old-overlay.png,fl_relative,w_1.0,h_1.0/c_scale'
    }, function(error, result) {console.log(error, result)});

    </script>

</div>

覆盖图像上的Cloudinary上传小部件

1 个答案: