我一直想在我的网站上展示我的图片。 我对 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>
当我调整浏览器大小时会发生一些缩放,但不是很多。 知道我做错了什么吗?
附注我只是四处摸索,找到了一个解决方案:我移动了 clear: both;宽度:100%;
到 .displayphoto
最佳答案
根据代码,您已经提供了不需要 float 图像的信息。将它们设置为“ block ”元素将使它们保持在自己的行和“width: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图片以帮助您网站的可访问性
关于css - 通过创建一个类使我的图像跨越整个网站,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17199299/