时间戳

首页 > 解决方案 > 图像在顺风的响应视图中缩小

css - 图像在顺风的响应视图中缩小

问题描述

所以我正在用 React 和 Tailwind 做一个项目。我有一个包含图像和文本的组件，在小屏幕上我有这样的布局。

在此处输入图像描述

该组件是“事件”一词下的卡片。这看起来正是我希望它看起来的样子，并且在更大的屏幕上我希望它更水平，如下所示：

在此处输入图像描述

所以这两个正是我想要的。问题是，当我调整窗口大小时，有一个大小（可能在 md 和 sm 之间）图像缩小并且没有填满卡片，这是它发生的图像

在此处输入图像描述

所以你可以看到图像高度只占卡片高度的 2/3 左右，也许在这种情况下，我可以将图像的宽度更改为卡片的一半，但我尝试过但无法做到。

下面是组件的代码：

<div className='flex flex-col w-auto bg-white border border-gray-500 rounded-t-xl overflow-hidden lg:flex-row md:rounded-xl'>
                {/* Image Container */}
                <div className='xs:w-full lg:w-1/4'>
                    <img className='object-cover' src={event.featured_image} alt={event.title} />
                </div>
                {/* Content Container */}
                <div className="flex flex-col justify-between p-2">
                    {/* Content */}
                    <div>
                        <p className='text-xl text-blue-700 font-semibold'>{event.title}</p>
                        <p className='py-2 text-gray-700'>{event.description}</p>
                    </div>
                    <div className='pt-8 sm:pt-0'>
                        <p className='text-sm text-blue-500'>{event.start_date}{event.end_date ? ` - ${event.end_date}` : ''}</p>
                    </div>
                </div>
            </div>

标签： cssreactjstailwind-css

解决方案

添加flex-shrink-0 类以防止图像缩小

<div className='xs:w-full lg:w-1/4 flex-shrink-0'>
    <img className='object-cover' src={event.featured_image} alt={event.title} />
</div>

推荐阅读