logo标签列表

无法使用Tailwind CSS实现图像响应式

cssflexboxresponsive-designtailwind-csstailwind-in-js
3

以下是代码 :)

<div>
  <div class="w-full m-4 rounded-xl flex flex-wrap shadow-md border-2 place-self-center">
    <div class="flex flex-1">
      <img class="object-cover overflow-hidden rounded-tl-xl rounded-bl-xl" src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&ixqx=4ciQ7zshM1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80" alt="image">
    </div>
    <div class="flex flex-1 flex-col justify-evenly p-6">
      <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
        </svg>
      </div>
      <h2 class="object-cover text-gray-800 font-extrabold text-4xl">Deliver what your customers <br> want every time</h2>
      <p class="text-gray-600">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</p>
      <div class="w-96 flex justify-between">
        <div>
          <p class="text-purple-800 font-bold text-3xl">24/7</p>
          <p class="text-gray-600">Delivery</p>
        </div>
        <div>
          <p class="text-purple-800 font-bold text-3xl">99.9%</p>
          <p class="text-gray-600">Pepperoni</p>
        </div>
        <div>
          <p class="text-purple-800 font-bold text-3xl">100k+</p>
          <p class="text-gray-600">Calories</p>
        </div>
      </div>
    </div>
  </div>
</div>

我希望使我的图片具有响应式，当我缩小屏幕时，图片也在缩小，但我希望使整个容器相对于屏幕大小缩小。
请问有人可以帮忙吗？我是 tailwind css 的新手。
谢谢 :)
2个回答
3

移除flex-wrap，使用 sm:flex-row flex-col 在移动屏幕中实现flex-direction: column。

您还可以将min-w-0添加到第二列中，以便能够缩小它。

演示

1

您可以使用aspect-ratio

<div class="aspect-w-16 aspect-h-9">
    <img class="w-full" src='url' alt="" />
</div>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接