Tailwind CSS学术成果页面样式问题求助

问题1：固定图片尺寸 #

给图片容器添加居中布局类，同时给图片设置object-contain属性保证比例，彻底固定尺寸：

• 图片容器保留固定宽高w-60 h-60，新增flex items-center justify-center让图片居中显示
• 图片设置w-full h-full object-contain，确保填充容器且不拉伸变形

问题2：添加年份信息 #

在作者信息下方新增年份展示行，用Tailwind样式调整视觉层级，让年份信息和其他内容区分开

修改后的完整代码 #

JavaScript代码（无需改动）

const abstractButton = document.getElementById('abstract-button');
const closeButton = document.getElementById('close-button');
const abstractPopup = document.getElementById('abstract-popup');

abstractButton.addEventListener('click', () => {
    abstractPopup.classList.remove('hidden');
});

closeButton.addEventListener('click', () => {
    abstractPopup.classList.add('hidden');
});

HTML代码

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-col h-screen">    
    <div class="flex flex-row justify-center items-start my-4">
    <!-- 图片容器：固定尺寸 + 居中布局 -->
    <div class="mr-8 w-60 h-60 flex items-center justify-center">
        <img src="https://via.placeholder.com/150" alt="Journal of Algebra" class="w-full h-full object-contain">
    </div>
    <div>
        <p class="mb-4 text-lg">
            The image of polynomials and Waring type problems on upper triangular matrix algebras
        </p>
        <p class="mb-2">
            <span class="authors">Authors: </span><strong>Sachchidanand Prasad</strong>, Saikat Panja and Navnath Daundkar
        </p>
        <!-- 新增年份信息 -->
        <p class="mb-4 text-gray-600 text-sm">Year: 2022</p>
        <div class="flex space-x-4 items-center my-2">
            <div class="border rounded-lg border-gray-600 p-1">
            <a href="https://arxiv.org/abs/2206.08827" target="_blank" class="text-blue-500 hover:text-blue-800">arXiv</a>
            </div>
            <div class="border rounded-lg border-gray-600 p-1">
            <a href="link-to-journal" target="_blank" class="text-blue-500 hover:text-blue-800">Journal</a>
            </div>
            <div class="border rounded-lg border-gray-600 p-1">
            <a href="link-to-pdf" target="_blank" class="text-blue-500 hover:text-blue-800">PDF</a>
            </div>
        </div>
        <button class="mt-4 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700" id="abstract-button">Abstract</button>
    </div>
    </div>
    
    <!-- Abstract Popup -->
    <div id="abstract-popup" class="fixed inset-0 flex items-center justify-center hidden">
    <div class="absolute bg-white rounded-lg p-8 w-1/2 shadow-lg">
        <h2 class="text-xl font-bold mb-4">Abstract</h2>
        <p class="text-gray-800">
        This is the abstract of your paper. It provides a concise summary of your research, highlighting the main objectives, methods, and findings. You can customize this section with your own abstract content.
        </p>
        <button class="mt-6 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700" id="close-button">Close</button>
    </div>
</div>

额外优化：给弹窗添加shadow-lg增强视觉层级，同时把外层flex的items-center改为items-start，避免长标题时图片与内容顶部不对齐的问题。

内容的提问来源于stack exchange，提问作者Sachchidanand Prasad