html - 扩展窗口时如何停止图像自动调整大小

我的网站http://www.tom-phelps.com/work出现问题
我只是注意到，当使用大显示器时，左上方的图像会自动调整大小并随着屏幕变宽而与其他内容重叠，尽管下方的图像没有，并且它们都使用完全相同的CSS和HTML设置，我已经尝试过调整第一个的大小。两者都是.JPEG，有人可以帮我吗？谢谢

-自行调整大小的图片-

.work1{
width: 100%;
min-width: 768px;
min-height:440px;


}

.image1{
width:35%;
float:left;
height:100%;
min-height:440px;
background-image:url(phelpsroofing2.jpg);
background-repeat:no-repeat;
margin-top:20px;
}

-图像保持不变-

.work2{
width: 100%;
min-width: 768px;
min-height:440px;
background-color:#cccccc;
}

.image2{
width:35%;
float:right;
height:100%;
min-height:440px;
background-image:url(ipad2.jpg);
background-repeat:no-repeat;
margin-top:20px;

}

最佳答案

您想确切地发生什么？宽度为100％的图像会缩放，这意味着高度也会根据图像的宽度自行调整。

如果要缩放图像但将其设置为上限，请为其提供最大宽度。如果要缩放但不重叠下面的内容，请给容器（即.work1）溢出：