nextjs 中的图像组件，带有适用于手机的 CSS 样式答案

【问题标题】：Image Component in nextjs with CSS styles for mobilesnextjs 中的图像组件，带有适用于手机的 CSS 样式
【发布时间】：2022-01-17 22:08:31
【问题描述】：

我正在使用 Image Nextjs 组件将我的图像放在页面的中心 i want the picture to be like this 并保持其卷轴大小，但它已被像素化。 plusm 当我减小屏幕宽度时，图片在小屏幕视图中显示不正确a part of the picture disappears

<div
   style={{
     position: 'relative',
     width: '1000px',
     height: '500px',
     alignItems: 'center',
   }}
>         
 <Image src='/services.png' alt='' layout='fill' objectFitt='fill' />
</div>

我认为问题出在 div 样式上。我非常努力地修复了 div 的宽度和高度，但我仍然在页面中看到变形的图片。我也将objectFit改为'cover'但同样的问题:( 我感谢任何帮助和任何关于如何在不被像素化的情况下放置图像的解释。太感谢了。图片尺寸为：width=1454px and height=455px here is the picture

【问题讨论】：

标签： css reactjs next.js

【解决方案1】：

您应该将 div 的宽度从 1000px 更改为 100% 以使其具有响应性并根据不同的屏幕尺寸选择高度。试试这个-

                 <div
                    style={{
                        position: 'relative',
                        width: '100%',
                        height: '300px',
                        alignItems: 'center',
                    }}
                >
                    <Image src={main_image} alt='' layout='fill' objectFitt='fill' />
                </div>

【讨论】：