title: How to change markdown image size in Vue 3/Laravel Nova/CSS?
body: <p>I am fetching markdown from a database:</p>
  <pre><code>    const state = reactive({
          content: &quot;&quot;
      })
      
      axios.get('/legal')
          .then(res =&gt; {
              const data = res.data
              state.content = DOMPurify.sanitize(marked(data['content']))
          })
  </code></pre>
  <p>And rendering it in my vue component like so:</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;div class=&quot;text-container&quot;&gt;
        &lt;div v-html=&quot;state.content&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>The problem is that the image gets rendered too large and stretches the whole page:</p>
  <p><a href="https://i.stack.imgur.com/MS5dB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MS5dB.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/gw2vG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gw2vG.png" alt="enter image description here" /></a></p>
  <p>I've tried to change the image size in CSS but none of my selectors work:</p>
  <pre class="lang-css prettyprint-override"><code>    .text-container {}
      .text-container img {}
      .text-container p img {}
  </code></pre>
  <p>I've also tried fiddling with parent element sizes but the image just overflows out of the parent element.</p>
  <p>The markdown is created in a <code>laravel nova backend CMS</code> like so:</p>
  <pre><code>## Statute
  
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci assumenda beatae commodi delectus dolor doloribus ducimus et eum facilis fugit ipsum iusto laboriosam maiores, minus molestias non nostrum obcaecati officia pariatur, quisquam repellat reprehenderit sit soluta totam! Hic, iste?
  
  ![Reiner](https://www.reflect.de/wp-content/uploads/2018/01/78_2.1.jpg)
  </code></pre>
  <p>Nova Resource Fields:</p>
  <pre><code>public function fields(Request $request)
  {
      return [
          ID::make(__('ID'), 'id')-&gt;sortable(),
  
          Markdown::make('Content')-&gt;alwaysShow(),
  
      ];
  }
  </code></pre>
  <p>And is rendered into html by <code>vue/laravel/mix</code> like so:</p>
  <p><a href="https://i.stack.imgur.com/Qgh2q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qgh2q.png" alt="enter image description here" /></a></p>
  <p>Is there any way I can change the markdown image size (preferably <code>CSS</code>) without my client having to write <code>html</code> on his end in the markdown editor?</p>