如何在这个tailblock组件的图片中添加overflow-hidden？
How to add overflow-hidden in the image of this tailblock component?
我正在使用以下基于 tailwind.css
的 tailblock 组件
我想要的是当我悬停时，图像仅在图像尺寸内放大。这意味着图像缩放但尺寸（高度和宽度）保持不变。
我试过了，但是右侧溢出了。
<script src="https://cdn.tailwindcss.com"></script>
<section class="text-gray-600 body-font overflow-hidden">
<div class="container px-5 py-24 mx-auto">
<div class="lg:w-4/5 mx-auto flex flex-wrap overflow-hidden">
<img alt="ecommerce" class="lg:w-1/2 w-full lg:h-auto h-64 object-cover object-center rounded transform transition duration-500 hover:scale-125 ease-in-out" src="https://dummyimage.com/400x400">
<div class="lg:w-1/2 w-full lg:pl-10 lg:py-6 mt-6 lg:mt-0">
<h2 class="text-sm title-font text-gray-500 tracking-widest">BRAND NAME</h2>
<h1 class="text-gray-900 text-3xl title-font font-medium mb-1">The Catcher in the Rye</h1>
<p class="leading-relaxed">Fam locavore kickstarter distillery. Mixtape chillwave tumeric sriracha taximy chia microdosing tilde DIY. XOXO fam indxgo juiceramps cornhole raw denim forage brooklyn. Everyday carry +1 seitan poutine tumeric. Gastropub blue bottle austin listicle pour-over, neutra jean shorts keytar banjo tattooed umami cardigan.</p>
<div class="flex mt-6 items-center pb-5 border-b-2 border-gray-100 mb-5">
<div class="flex">
<span class="mr-3">Color</span>
<button class="border-2 border-gray-300 rounded-full w-6 h-6 focus:outline-none"></button>
<button class="border-2 border-gray-300 ml-1 bg-gray-700 rounded-full w-6 h-6 focus:outline-none"></button>
<button class="border-2 border-gray-300 ml-1 bg-indigo-500 rounded-full w-6 h-6 focus:outline-none"></button>
</div>
<div class="flex ml-6 items-center">
<span class="mr-3">Size</span>
<div class="relative">
<select class="rounded border appearance-none border-gray-300 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 text-base pl-3 pr-10">
<option>SM</option>
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
<span class="absolute right-0 top-0 h-full w-10 text-center text-gray-600 pointer-events-none flex items-center justify-center">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4" viewBox="0 0 24 24">
<path d="M6 9l6 6 6-6"></path>
</svg>
</span>
</div>
</div>
</div>
<div class="flex">
<span class="title-font font-medium text-2xl text-gray-900">.00</span>
<button class="flex ml-auto text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded">Button</button>
<button class="rounded-full w-10 h-10 bg-gray-200 p-0 border-0 inline-flex items-center justify-center text-gray-500 ml-4">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</section>
如何解决？
CSS scale() 基本上是增加或减少一个元素的size/dimensions（根据实际宽高）。如果您的实际图像大小为 100x100，而您使用的是 scale(1.1)，则大小将为 110x110。所以overflow: hidden不会隐藏多余的部分。
在这种情况下，只需用 <div/> 元素包裹图像并对其应用 overflow: hidden。
<div class="overflow-hidden">
<img src="" alt=""/>
</div>
这是已解决的片段：
<script src="https://cdn.tailwindcss.com"></script>
<section class="text-gray-600 body-font overflow-hidden">
<div class="container px-5 py-24 mx-auto">
<div class="lg:w-4/5 mx-auto flex flex-wrap overflow-hidden">
<div class="lg:w-1/2 w-full overflow-hidden">
<img alt="ecommerce" class="w-full lg:h-auto h-64 object-cover object-center rounded transform transition duration-500 hover:scale-125 ease-in-out" src="https://dummyimage.com/400x400">
</div>
<div class="lg:w-1/2 w-full lg:pl-10 lg:py-6 mt-6 lg:mt-0">
<h2 class="text-sm title-font text-gray-500 tracking-widest">BRAND NAME</h2>
<h1 class="text-gray-900 text-3xl title-font font-medium mb-1">The Catcher in the Rye</h1>
<p class="leading-relaxed">Fam locavore kickstarter distillery. Mixtape chillwave tumeric sriracha taximy chia microdosing tilde DIY. XOXO fam indxgo juiceramps cornhole raw denim forage brooklyn. Everyday carry +1 seitan poutine tumeric. Gastropub blue bottle austin listicle pour-over, neutra jean shorts keytar banjo tattooed umami cardigan.</p>
<div class="flex mt-6 items-center pb-5 border-b-2 border-gray-100 mb-5">
<div class="flex">
<span class="mr-3">Color</span>
<button class="border-2 border-gray-300 rounded-full w-6 h-6 focus:outline-none"></button>
<button class="border-2 border-gray-300 ml-1 bg-gray-700 rounded-full w-6 h-6 focus:outline-none"></button>
<button class="border-2 border-gray-300 ml-1 bg-indigo-500 rounded-full w-6 h-6 focus:outline-none"></button>
</div>
<div class="flex ml-6 items-center">
<span class="mr-3">Size</span>
<div class="relative">
<select class="rounded border appearance-none border-gray-300 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 text-base pl-3 pr-10">
<option>SM</option>
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
<span class="absolute right-0 top-0 h-full w-10 text-center text-gray-600 pointer-events-none flex items-center justify-center">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4" viewBox="0 0 24 24">
<path d="M6 9l6 6 6-6"></path>
</svg>
</span>
</div>
</div>
</div>
<div class="flex">
<span class="title-font font-medium text-2xl text-gray-900">.00</span>
<button class="flex ml-auto text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded">Button</button>
<button class="rounded-full w-10 h-10 bg-gray-200 p-0 border-0 inline-flex items-center justify-center text-gray-500 ml-4">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</section>
您可以将图像放入 div 容器并添加 overflow-hidden class。现在缩放后的图像永远不会比它的容器大。
概念：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="flex min-h-screen items-center justify-center p-10">
<div class="h-24 w-full overflow-hidden rounded">
<img class="h-full w-full transform object-cover object-center transition duration-500 ease-in-out hover:scale-125" src="https://dummyimage.com/400x400" />
</div>
</div>
原代码
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<section class="body-font overflow-hidden text-gray-600">
<div class="container mx-auto px-5 py-24">
<div class="mx-auto flex flex-wrap overflow-hidden lg:w-4/5">
<!-- Image Container -->
<div class="h-64 w-full overflow-hidden rounded lg:h-auto lg:w-1/2">
<img alt="ecommerce" class="h-full w-full transform object-cover object-center transition duration-500 ease-in-out hover:scale-125" src="https://dummyimage.com/400x400" />
</div>
<!-- END Image Container -->
<div class="mt-6 w-full lg:mt-0 lg:w-1/2 lg:py-6 lg:pl-10">
<h2 class="title-font text-sm tracking-widest text-gray-500">BRAND NAME</h2>
<h1 class="title-font mb-1 text-3xl font-medium text-gray-900">The Catcher in the Rye</h1>
</div>
</div>
</div>
</section>
<script src="https://cdn.tailwindcss.com"></script>
<section class="text-gray-600 body-font overflow-hidden">
<div class="container px-5 py-24 mx-auto">
<div class="lg:w-4/5 mx-auto flex flex-wrap overflow-hidden">
<div class="overflow-hidden w-full">
<img alt="ecommerce"
class="w-full h-64 object-cover object-center rounded transform transition duration-500 hover:scale-125 ease-in-out"
src="https://dummyimage.com/400x400">
</div>
<div class="lg:w-1/2 w-full lg:pl-10 lg:py-6 mt-6 lg:mt-0">
<h2 class="text-sm title-font text-gray-500 tracking-widest">BRAND NAME</h2>
<h1 class="text-gray-900 text-3xl title-font font-medium mb-1">The Catcher in the Rye</h1>
<p class="leading-relaxed">Fam locavore kickstarter distillery. Mixtape chillwave tumeric sriracha
taximy chia microdosing tilde DIY. XOXO fam indxgo juiceramps cornhole raw denim forage
brooklyn. Everyday carry +1 seitan poutine tumeric. Gastropub blue bottle austin listicle
pour-over, neutra jean shorts keytar banjo tattooed umami cardigan.</p>
<div class="flex mt-6 items-center pb-5 border-b-2 border-gray-100 mb-5">
<div class="flex">
<span class="mr-3">Color</span>
<button class="border-2 border-gray-300 rounded-full w-6 h-6 focus:outline-none"></button>
<button
class="border-2 border-gray-300 ml-1 bg-gray-700 rounded-full w-6 h-6 focus:outline-none"></button>
<button
class="border-2 border-gray-300 ml-1 bg-indigo-500 rounded-full w-6 h-6 focus:outline-none"></button>
</div>
<div class="flex ml-6 items-center">
<span class="mr-3">Size</span>
<div class="relative">
<select
class="rounded border appearance-none border-gray-300 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 text-base pl-3 pr-10">
<option>SM</option>
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
<span
class="absolute right-0 top-0 h-full w-10 text-center text-gray-600 pointer-events-none flex items-center justify-center">
<svg fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" class="w-4 h-4" viewBox="0 0 24 24">
<path d="M6 9l6 6 6-6"></path>
</svg>
</span>
</div>
</div>
</div>
<div class="flex">
<span class="title-font font-medium text-2xl text-gray-900">.00</span>
<button
class="flex ml-auto text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded">Button</button>
<button
class="rounded-full w-10 h-10 bg-gray-200 p-0 border-0 inline-flex items-center justify-center text-gray-500 ml-4">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
class="w-5 h-5" viewBox="0 0 24 24">
<path
d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z">
</path>
</svg>
</button>
</div>
</div>
</div>
</div>
</section>
你必须将图像放入 div 并添加 class overflow-hidden 和 w-full 或者你可以简单地替换此代码。
我正在使用以下基于 tailwind.css
的 tailblock 组件我想要的是当我悬停时，图像仅在图像尺寸内放大。这意味着图像缩放但尺寸（高度和宽度）保持不变。
我试过了，但是右侧溢出了。
<script src="https://cdn.tailwindcss.com"></script>
<section class="text-gray-600 body-font overflow-hidden">
<div class="container px-5 py-24 mx-auto">
<div class="lg:w-4/5 mx-auto flex flex-wrap overflow-hidden">
<img alt="ecommerce" class="lg:w-1/2 w-full lg:h-auto h-64 object-cover object-center rounded transform transition duration-500 hover:scale-125 ease-in-out" src="https://dummyimage.com/400x400">
<div class="lg:w-1/2 w-full lg:pl-10 lg:py-6 mt-6 lg:mt-0">
<h2 class="text-sm title-font text-gray-500 tracking-widest">BRAND NAME</h2>
<h1 class="text-gray-900 text-3xl title-font font-medium mb-1">The Catcher in the Rye</h1>
<p class="leading-relaxed">Fam locavore kickstarter distillery. Mixtape chillwave tumeric sriracha taximy chia microdosing tilde DIY. XOXO fam indxgo juiceramps cornhole raw denim forage brooklyn. Everyday carry +1 seitan poutine tumeric. Gastropub blue bottle austin listicle pour-over, neutra jean shorts keytar banjo tattooed umami cardigan.</p>
<div class="flex mt-6 items-center pb-5 border-b-2 border-gray-100 mb-5">
<div class="flex">
<span class="mr-3">Color</span>
<button class="border-2 border-gray-300 rounded-full w-6 h-6 focus:outline-none"></button>
<button class="border-2 border-gray-300 ml-1 bg-gray-700 rounded-full w-6 h-6 focus:outline-none"></button>
<button class="border-2 border-gray-300 ml-1 bg-indigo-500 rounded-full w-6 h-6 focus:outline-none"></button>
</div>
<div class="flex ml-6 items-center">
<span class="mr-3">Size</span>
<div class="relative">
<select class="rounded border appearance-none border-gray-300 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 text-base pl-3 pr-10">
<option>SM</option>
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
<span class="absolute right-0 top-0 h-full w-10 text-center text-gray-600 pointer-events-none flex items-center justify-center">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4" viewBox="0 0 24 24">
<path d="M6 9l6 6 6-6"></path>
</svg>
</span>
</div>
</div>
</div>
<div class="flex">
<span class="title-font font-medium text-2xl text-gray-900">.00</span>
<button class="flex ml-auto text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded">Button</button>
<button class="rounded-full w-10 h-10 bg-gray-200 p-0 border-0 inline-flex items-center justify-center text-gray-500 ml-4">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</section>
如何解决？
CSS scale() 基本上是增加或减少一个元素的size/dimensions（根据实际宽高）。如果您的实际图像大小为 100x100，而您使用的是 scale(1.1)，则大小将为 110x110。所以overflow: hidden不会隐藏多余的部分。
在这种情况下，只需用 <div/> 元素包裹图像并对其应用 overflow: hidden。
<div class="overflow-hidden">
<img src="" alt=""/>
</div>
这是已解决的片段：
<script src="https://cdn.tailwindcss.com"></script>
<section class="text-gray-600 body-font overflow-hidden">
<div class="container px-5 py-24 mx-auto">
<div class="lg:w-4/5 mx-auto flex flex-wrap overflow-hidden">
<div class="lg:w-1/2 w-full overflow-hidden">
<img alt="ecommerce" class="w-full lg:h-auto h-64 object-cover object-center rounded transform transition duration-500 hover:scale-125 ease-in-out" src="https://dummyimage.com/400x400">
</div>
<div class="lg:w-1/2 w-full lg:pl-10 lg:py-6 mt-6 lg:mt-0">
<h2 class="text-sm title-font text-gray-500 tracking-widest">BRAND NAME</h2>
<h1 class="text-gray-900 text-3xl title-font font-medium mb-1">The Catcher in the Rye</h1>
<p class="leading-relaxed">Fam locavore kickstarter distillery. Mixtape chillwave tumeric sriracha taximy chia microdosing tilde DIY. XOXO fam indxgo juiceramps cornhole raw denim forage brooklyn. Everyday carry +1 seitan poutine tumeric. Gastropub blue bottle austin listicle pour-over, neutra jean shorts keytar banjo tattooed umami cardigan.</p>
<div class="flex mt-6 items-center pb-5 border-b-2 border-gray-100 mb-5">
<div class="flex">
<span class="mr-3">Color</span>
<button class="border-2 border-gray-300 rounded-full w-6 h-6 focus:outline-none"></button>
<button class="border-2 border-gray-300 ml-1 bg-gray-700 rounded-full w-6 h-6 focus:outline-none"></button>
<button class="border-2 border-gray-300 ml-1 bg-indigo-500 rounded-full w-6 h-6 focus:outline-none"></button>
</div>
<div class="flex ml-6 items-center">
<span class="mr-3">Size</span>
<div class="relative">
<select class="rounded border appearance-none border-gray-300 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 text-base pl-3 pr-10">
<option>SM</option>
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
<span class="absolute right-0 top-0 h-full w-10 text-center text-gray-600 pointer-events-none flex items-center justify-center">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4" viewBox="0 0 24 24">
<path d="M6 9l6 6 6-6"></path>
</svg>
</span>
</div>
</div>
</div>
<div class="flex">
<span class="title-font font-medium text-2xl text-gray-900">.00</span>
<button class="flex ml-auto text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded">Button</button>
<button class="rounded-full w-10 h-10 bg-gray-200 p-0 border-0 inline-flex items-center justify-center text-gray-500 ml-4">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</section>
您可以将图像放入 div 容器并添加 overflow-hidden class。现在缩放后的图像永远不会比它的容器大。
概念：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="flex min-h-screen items-center justify-center p-10">
<div class="h-24 w-full overflow-hidden rounded">
<img class="h-full w-full transform object-cover object-center transition duration-500 ease-in-out hover:scale-125" src="https://dummyimage.com/400x400" />
</div>
</div>
原代码
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<section class="body-font overflow-hidden text-gray-600">
<div class="container mx-auto px-5 py-24">
<div class="mx-auto flex flex-wrap overflow-hidden lg:w-4/5">
<!-- Image Container -->
<div class="h-64 w-full overflow-hidden rounded lg:h-auto lg:w-1/2">
<img alt="ecommerce" class="h-full w-full transform object-cover object-center transition duration-500 ease-in-out hover:scale-125" src="https://dummyimage.com/400x400" />
</div>
<!-- END Image Container -->
<div class="mt-6 w-full lg:mt-0 lg:w-1/2 lg:py-6 lg:pl-10">
<h2 class="title-font text-sm tracking-widest text-gray-500">BRAND NAME</h2>
<h1 class="title-font mb-1 text-3xl font-medium text-gray-900">The Catcher in the Rye</h1>
</div>
</div>
</div>
</section>
<script src="https://cdn.tailwindcss.com"></script>
<section class="text-gray-600 body-font overflow-hidden">
<div class="container px-5 py-24 mx-auto">
<div class="lg:w-4/5 mx-auto flex flex-wrap overflow-hidden">
<div class="overflow-hidden w-full">
<img alt="ecommerce"
class="w-full h-64 object-cover object-center rounded transform transition duration-500 hover:scale-125 ease-in-out"
src="https://dummyimage.com/400x400">
</div>
<div class="lg:w-1/2 w-full lg:pl-10 lg:py-6 mt-6 lg:mt-0">
<h2 class="text-sm title-font text-gray-500 tracking-widest">BRAND NAME</h2>
<h1 class="text-gray-900 text-3xl title-font font-medium mb-1">The Catcher in the Rye</h1>
<p class="leading-relaxed">Fam locavore kickstarter distillery. Mixtape chillwave tumeric sriracha
taximy chia microdosing tilde DIY. XOXO fam indxgo juiceramps cornhole raw denim forage
brooklyn. Everyday carry +1 seitan poutine tumeric. Gastropub blue bottle austin listicle
pour-over, neutra jean shorts keytar banjo tattooed umami cardigan.</p>
<div class="flex mt-6 items-center pb-5 border-b-2 border-gray-100 mb-5">
<div class="flex">
<span class="mr-3">Color</span>
<button class="border-2 border-gray-300 rounded-full w-6 h-6 focus:outline-none"></button>
<button
class="border-2 border-gray-300 ml-1 bg-gray-700 rounded-full w-6 h-6 focus:outline-none"></button>
<button
class="border-2 border-gray-300 ml-1 bg-indigo-500 rounded-full w-6 h-6 focus:outline-none"></button>
</div>
<div class="flex ml-6 items-center">
<span class="mr-3">Size</span>
<div class="relative">
<select
class="rounded border appearance-none border-gray-300 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500 text-base pl-3 pr-10">
<option>SM</option>
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
<span
class="absolute right-0 top-0 h-full w-10 text-center text-gray-600 pointer-events-none flex items-center justify-center">
<svg fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" class="w-4 h-4" viewBox="0 0 24 24">
<path d="M6 9l6 6 6-6"></path>
</svg>
</span>
</div>
</div>
</div>
<div class="flex">
<span class="title-font font-medium text-2xl text-gray-900">.00</span>
<button
class="flex ml-auto text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded">Button</button>
<button
class="rounded-full w-10 h-10 bg-gray-200 p-0 border-0 inline-flex items-center justify-center text-gray-500 ml-4">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
class="w-5 h-5" viewBox="0 0 24 24">
<path
d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z">
</path>
</svg>
</button>
</div>
</div>
</div>
</div>
</section>
你必须将图像放入 div 并添加 class overflow-hidden 和 w-full 或者你可以简单地替换此代码。