Question

我真的在my website的主页上苦苦挣扎。

动画和互动，网页设计，平面设计和插图的图像在我的电脑上看起来很好，但当我在iPad上查看我的网站时，它们无法正确缩放。

这是CSS：

#content { 
   position: relative;
   color: #333;
   width:100%;
   min-width: 900px;
   border:none;
   background: none;
   overflow:auto;
   padding-right:32px;
   padding-left:32px;
   padding-bottom: 86px;
}
#slideshow {
   position:relative;
   height:462px;
   z-index:-1;
}
#slideshow IMG {
   position:absolute;
   top:0;
   left:0;
   z-index:8;
}
#slideshow IMG.active {
   z-index:10;
}
#slideshow IMG.last-active {
   z-index:9;
}
#rightholder {
   float: right;
   clear: left;
   max-width: 639px;
   width: 60%;
   padding-top: 90px;   
   z-index:11;
}
.right {
   float:right;
   margin-bottom:20px;
   max-width: 50%;
   z-index:13;
}
.left{
   float:left;
   margin-bottom:20px;
   max-width: 50%;
   z-index:12;
}

Answer 1

我不确定您要实现的目标，但我相信您的问题主要来自于调整大小时约束页面的某些min-width和max-width属性。

如果您使用的是柔性装置，则应尽量使布局尽可能流畅。我猜你正在使用这些属性来防止奇怪的行为，因为你应该使用media queries来使你的设计适应不同的分辨率。

您还应该确保没有为图像设置固定大小（在CSS或HTML文档中）。相反，请使用img { max-width: 100%; }。

希望它有所帮助。

图像无法在设备上缩放

1 个答案: