通过创建一个类使我的图像跨越整个网站答案

【问题标题】：Making my images span across the website by creating a class通过创建一个类使我的图像跨越整个网站
【发布时间】：2013-06-16 11:07:13
【问题描述】：

我一直想在我的网站上展示我的图片。我对 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; width: 100%;移动到.displayphoto

【问题讨论】：

您的图片将同时应用.displayphoto 规则。
如果您可以发布一个 jsfiddle 示例，它会更容易诊断。但是，当您将.displayphoto 浮动到左侧时，div 的默认width: 100% 不再生效，我认为这可能是您的图像缩放问题。
jsfiddle.net/derekstory/V3D6a 这是汤姆的解决方案。

标签： css image class html

【解决方案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 添加到图像中，以帮助您的网站的可访问性

【讨论】：