Question

我的网站问题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;

}

Answer 1

您想要完全发生什么？宽度为100％的图像将缩放，这意味着高度也会根据图像的宽度进行自我调整。

如果您希望图像缩放但是上限，请为其指定最大宽度。如果您希望它缩放但不与下面的内容重叠，请为容器（即.work1）提供溢出：隐藏;

如何在窗口展开时停止图像自动调整大小

1 个答案: