Есть ли современный способ обернуть текст вокруг прозрачного изображения? - PullRequest
Новая
       17

Есть ли современный способ обернуть текст вокруг прозрачного изображения?

2 голосов
/ 23 февраля 2020

Я пытался воссоздать это как веб-страницу https://imgur.com/a/sgCHAe1

Как вы можете видеть, описание растения взаимодействует с ограничивающей рамкой изображения. Поскольку я хочу, чтобы эта веб-страница могла отображать динамическое содержимое c, это не масштабируемый подход для разработки многоугольника формы для каждого растения.

Мой первый подход заключался в использовании плагина jQuery jQSlickWrap, это делает какую-то работу (https://imgur.com/a/dqEarb3, верхние поля взаимодействуют с динамически сгенерированной ограничительной рамкой изображения, но текст - нет). Это создает несколько проблем, в основном:

A) Я не нашел способа увеличить и сместить изображение (чтобы воссоздать эффект модели)

B) Описание не взаимодействует с изображением

Я думаю, я мог бы исправить текст с помощью js, вырезая элемент p и создавая новый, когда он сталкивается с изображением, но я думаю, что это слишком излишне. Существуют ли какие-либо современные альтернативы jQSlickWrap, которые будут работать, или я неправильно использую плагин?

=======

Примечания:

  • Я использую MetroUI 4 для грид-системы
  • Также я использую Django для бэкэнда, если это поможет каким-либо образом

HTML: 

<html lang="es" class="metro-no-touch-device"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css">
  <style></style></head>
  <body>
    <div style="background-image: url(&quot;data:image/png;base64,//Lots of data//&quot;);background-position: right top;background-repeat: no-repeat;min-height: 881px;background-size: auto;"><div style="width: 495px; float: right; height: 20px; clear: right"></div><div style="width: 505px; float: right; height: 20px; clear: right"></div><div style="width: 502px; float: right; height: 20px; clear: right"></div><div style="width: 609px; float: right; height: 20px; clear: right"></div><div style="width: 637px; float: right; height: 20px; clear: right"></div><div style="width: 643px; float: right; height: 20px; clear: right"></div><div style="width: 643px; float: right; height: 20px; clear: right"></div><div style="width: 726px; float: right; height: 20px; clear: right"></div><div style="width: 732px; float: right; height: 20px; clear: right"></div><div style="width: 745px; float: right; height: 20px; clear: right"></div><div style="width: 747px; float: right; height: 20px; clear: right"></div><div style="width: 749px; float: right; height: 20px; clear: right"></div><div style="width: 769px; float: right; height: 20px; clear: right"></div><div style="width: 781px; float: right; height: 20px; clear: right"></div><div style="width: 782px; float: right; height: 20px; clear: right"></div><div style="width: 779px; float: right; height: 20px; clear: right"></div><div style="width: 744px; float: right; height: 20px; clear: right"></div><div style="width: 733px; float: right; height: 20px; clear: right"></div><div style="width: 772px; float: right; height: 20px; clear: right"></div><div style="width: 782px; float: right; height: 20px; clear: right"></div><div style="width: 780px; float: right; height: 20px; clear: right"></div><div style="width: 715px; float: right; height: 20px; clear: right"></div><div style="width: 704px; float: right; height: 20px; clear: right"></div><div style="width: 678px; float: right; height: 20px; clear: right"></div><div style="width: 667px; float: right; height: 20px; clear: right"></div><div style="width: 690px; float: right; height: 20px; clear: right"></div><div style="width: 700px; float: right; height: 20px; clear: right"></div><div style="width: 702px; float: right; height: 20px; clear: right"></div><div style="width: 687px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div>
        <div class="ml-4">
            <div class="row">
                <div class="cell py-0">
                    <h1 class="mb-0">Diente de León</h1>
                </div>
            </div>
            <div class="row">
                <div class="cell py-0">
                    <h1 class="my-0"><small>Taraxacum officinale</small></h1>
                </div>
            </div>
            <div class="row grid mt-2 ml-4">
                <div class="row"><div class="cell py-0"><b>Clase: </b><i>Magnoliopsida</i></div></div>
                <div class="row"><div class="cell py-0"><b>Orden: </b><i>Asterales</i></div></div>
                <div class="row"><div class="cell py-0"><b>Familia: </b><i>Asteraceae</i></div></div>
                <div class="row"><div class="cell py-0"><b>Género: </b><i>Taraxacum</i></div></div>
                <div class="row"><div class="cell py-0"><b>Especie: </b><i>Taraxacum officinale</i></div></div>
            </div>
            <div class="row mt-3">
                <p>
                    <b>Origen, distribución y características:</b><br>
                    Expedita consectetur optio doloremque quisquam fugiat architecto eum non possimus, inventore id doloremque laboriosam asperiores modi minus commodi nisi excepturi expedita? Vitae quis deserunt itaque ea eos exercitationem, enim aut aliquid obcaecati illum ipsa exercitationem facilis nobis vitae? Corrupti dolorum eos saepe atque reiciendis aliquid minima iste magni et accusamus? Qui delectus autem aspernatur.
Fugiat reprehenderit repellendus ut excepturi ipsa voluptatum quod non aliquid, natus optio tempore similique quos atque exercitationem enim repudiandae nam harum, natus hic ea excepturi quidem nemo, ex numquam obcaecati ipsum, aperiam nostrum beatae. Neque eveniet sequi quos. Aut sit illum molestias ullam ipsa quibusdam eius corrupti cupiditate voluptatem quasi.
Animi vero tempora dolorem perferendis autem harum aspernatur tenetur odit ipsam, amet blanditiis ut eaque esse laborum fuga illo voluptates, dolorem ipsum esse harum tempore cum ad illum earum natus iure obcaecati, dolorum repudiandae commodi quos recusandae quae exercitationem ab expedita, dolorem consectetur ipsum? Beatae accusantium officia illum eveniet tempora repellat laudantium hic iste mollitia. Quas dolorem quisquam expedita saepe quo aliquid repellendus, facere dolor voluptate cupiditate soluta dicta dolorum magnam amet est perferendis harum, esse modi ea magnam quisquam labore, rem eius hic autem, enim molestias optio. Temporibus beatae impedit est optio, non placeat sapiente mollitia ea magnam alias inventore nobis saepe sed, nemo illo quaerat praesentium labore quisquam blanditiis, totam quis perspiciatis doloribus itaque ipsam laudantium nostrum delectus magni, facere vero sequi neque harum?
                </p>
            </div>
        </div>
        <img src="/static/img/defaultplant.png " alt="" style="float: right;height: 100vh;display: none;" id="imgae">
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://rawcdn.githack.com/jasonwyatt/jQSlickWrap/2c0d8fb34807bea9f5e9e45a4f8f04a5238237b0/jquery.slickwrap.js"></script>
    <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#imgae").slickWrap();
        })
    </script>
</body></html>
...