OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Making an image scale down on mobile with next/Image

  • Thread starter Thread starter AmongusDev
  • Start date Start date
A

AmongusDev

Guest
I am using next/Image along with tailwind to render an image which acts as a banner. It spans the entire width of its parent, which is the entire page width.

The issue I am having is that the image looks squished and not properly proportioned on mobile, which I am looking to fix. I have tried solutions from two other solutions on this site (here and here), but nothing ever worked for me.

I suspect it may be the height that is set on the parent div, which I am open to changing if that would aid in fixing my issue.


Code:
      <div className="relative w-full h-[476px]">
  <Image src="/banner.jpg" alt="Banner" fill />
</div>

<p>I am using <code>next/Image</code> along with tailwind to render an image which acts as a banner. It spans the entire width of its parent, which is the entire page width.</p>
<p>The issue I am having is that the image looks squished and not properly proportioned on mobile, which I am looking to fix. I have tried solutions from two other solutions on this site (<a href="https://stackoverflow.com/questions/1575141/how-to-make-a-div-100-height-of-the-browser-window">here</a> and <a href="https://stackoverflow.com/questions/7662064/how-do-i-automatically-resize-an-image-for-a-mobile-site">here</a>), but nothing ever worked for me.</p>
<p>I suspect it may be the height that is set on the parent div, which I am open to changing if that would aid in fixing my issue.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code> <div className="relative w-full h-[476px]">
<Image src="/banner.jpg" alt="Banner" fill />
</div></code></pre>
</div>
</div>
</p>
 
Top