不同的web元素位置在不同的分辨率

Question

图片1 1920X1080：

图片2 1400X1050：

从图1可以看出，我的设计分辨率为1920X1080，它看起来很棒，但是当我以1400X1050分辨率打开它时，它看起来如图2所示那么可怕。任何人都可以建议我这个案例的最佳解决方案吗？

继承我的背景CSS：

body {

background-image: url(images/background-photo.jpg);


background-position: center center;


background-repeat: no-repeat;


background-attachment: fixed;


background-size: 100% auto;


background-color:#245528;



}

 /* For mobile devices */
@media only screen and (max-width: 767px) {
body {

background-image: url(images/background-photo-mobile-devices.jpg);
    background-size: cover;
}
}

Answer 1

如果要以不同的分辨率以良好的方式显示图像，则需要为不同的分辨率设置不同的图像。您可以使用srcset实现它：

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

来源：Responsive Images: If you’re just changing resolutions

Answer 2

我认为你的案例的正确风格是

background-size: contain;

而不是

background-size: 100% auto;

contain将始终保持容器元素中显示的图像，因此当图像的宽度或高度太小时，它会尝试调整图像的大小，以便显示整个图像（可能是顶部/左侧或底部/右侧的空白区域。相反，100% auto将始终尝试拉伸图像，使其与屏幕一样宽。