Question

我一直想在我的网站上浏览我的图片。我对css很新，所以我可能有很多错误。

我在这里定义了我的课程：

#galleryphotos { float:left; margin: 0; padding: 0; width: 100%; }
.displayphoto { float:left;  border: none;  margin: none; padding: none; }
img.displayphoto {   clear: both;  display: block; position: relative;  width: 100%;}

在这里我展示它：

<div id="galleryphotos"> 
    <div class="displayphoto"> <img src="images/property/DSC_0006.JPG" class="displayphoto"> </div>
    <div class="displayphoto"> <img src="images/property/DSC_0007.JPG" class="displayphoto"> </div>
</div>

当我调整浏览器大小但不是很多时，会发生一些缩放。我有什么想法，我做错了吗？

P.S。我只是摆弄并找到了解决方案：我将clear: both; width: 100%;移到.displayphoto

Answer 1

从您提供的代码中，您不需要浮动图像。将它们设置为“块”元素将使它们保持在自己的行上并且“宽度：100％;”当你调整窗口大小时，它们将允许它们填充并缩放到容器的宽度。

CSS

#galleryphotos {
   margin: 0;
   padding: 0;
}
.displayphoto {
   display: block;
   position: relative;
   width: 100%;
   border:none;
}

HTML

<div id="galleryphotos">
    <img src="images/property/DSC_0006.JPG" class="displayphoto" alt="DSC_0006" />
    <img src="images/property/DSC_0007.JPG" class="displayphoto" alt="DSC_0007" />
</div>

jsfiddle.net/jonathanglyn/waKSv

如果您想在保持照片缩放的同时在图像周围添加填充，可以通过在“galleryphotos”容器中添加边距并在“displayphoto”类的底部添加边距来实现此目的。

此外，在可能的情况下，您应始终将ALT tag包含在图片中以帮助您访问网站

通过创建课程使我的图像跨越网站

1 个答案: